Mdl-stepper does not respond to overflow

Question

Hi, so the problem I am facing can be seen through codepen.io no matter what I do, I can not get mdl-stepper to make its height the same as the contents inside.

There seems to be no real getmdl.io for this.

CSS (I know this is a problem)

/** * mdl-stepper - A Material Design Lite Stepper component polyfill. * @version v1.1.6 * @author Alexandre Thebaldi < [e-mail] >. * @link https://github.com/ahlechandre/mdl-stepper * */ /* MDL Stepper */ /** * mdl-stepper - A Material Design Lite Stepper component polyfill. * @version v1.1.6 * @author Alexandre Thebaldi < [e-mail] >. * @link https://github.com/ahlechandre/mdl-stepper * */ /* STEPPER */ /* GRID */ /* SHADOWS */ /** * mdl-stepper - A Material Design Lite Stepper component polyfill. * @version v1.1.6 * @author Alexandre Thebaldi < [e-mail] >. * @link https://github.com/ahlechandre/mdl-stepper * */ /* Animation */ /* KEYFRAMES */ /* DISPLAY FLEX */ /* Shadows */ /** * mdl-stepper - A Material Design Lite Stepper component polyfill. * @version v1.1.6 * @author Alexandre Thebaldi < [e-mail] >. * @link https://github.com/ahlechandre/mdl-stepper * * @contributor Michael Haschke <http://michael.haschke.biz/> */ /** * mdl-stepper - A Material Design Lite Stepper component polyfill. * @version v1.1.6 * @author Alexandre Thebaldi < [e-mail] >. * @link https://github.com/ahlechandre/mdl-stepper * */ /* STEPPER */ /* GRID */ /* SHADOWS */ /** * mdl-stepper - A Material Design Lite Stepper component polyfill. * @version v1.1.6 * @author Alexandre Thebaldi < [e-mail] >. * @link https://github.com/ahlechandre/mdl-stepper * */ /* Animation */ /* KEYFRAMES */ /* DISPLAY FLEX */ /* Shadows */ /** * mdl-stepper - A Material Design Lite Stepper component polyfill. * @version v1.1.6 * @author Alexandre Thebaldi < [e-mail] >. * @link https://github.com/ahlechandre/mdl-stepper * */ @-webkit-keyframes FadeIn { 0% { opacity: 0; } 100% { opacity: 100; } } @-moz-keyframes FadeIn { 0% { opacity: 0; } 100% { opacity: 100; } } @-o-keyframes FadeIn { 0% { opacity: 0; } 100% { opacity: 100; } } @keyframes FadeIn { 0% { opacity: 0; } 100% { opacity: 100; } } @-webkit-keyframes FadeInFromBottom { 0% { height: 0; padding-top: 84px; background-color: white; color: white; } 25% { color: white; } } @-moz-keyframes FadeInFromBottom { 0% { height: 0; padding-top: 84px; background-color: white; color: white; } 25% { color: white; } } @-o-keyframes FadeInFromBottom { 0% { height: 0; padding-top: 84px; background-color: white; color: white; } 25% { color: white; } } @keyframes FadeInFromBottom { 0% { height: 0; padding-top: 84px; background-color: white; color: white; } 25% { color: white; } } /* STEPPER */ .mdl-stepper { position: relative; font-family: "Roboto", sans-serif; background-color: white; display: block; box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); padding: 24px 0; max-width: 720px; width: 100%; border-radius: 2px; } .mdl-stepper > li { list-style: none; } /* STEPPER ON SMALL SCREENS */ @media only screen and (max-width: 375px) { .mdl-stepper { width: 100vw; } .mdl-grid .mdl-cell .mdl-stepper { margin-left: -16px; } } /* STEPPER VERTICAL ONLY */ .mdl-stepper:not(.mdl-stepper--horizontal) > .mdl-step:not(:last-child):after { content: ''; position: absolute; top: 50px; left: 37px; width: 1px; height: calc(100% - 24px); background-color: rgba(0, 0, 0, 0.1); } .mdl-stepper:not(.mdl-stepper--horizontal) > .mdl-step:not(:last-child).is-active:after { height: calc(100% - 12px); } .mdl-stepper:not(.mdl-stepper--horizontal) .mdl-step__label:hover, .mdl-stepper:not(.mdl-stepper--horizontal) .mdl-step__label:active, .mdl-stepper:not(.mdl-stepper--horizontal) .mdl-step__label:focus { background-color: rgba(0, 0, 0, 0.06); } /* STEP */ .mdl-step { position: relative; height: 460px; } .mdl-step:not(.is-active) { height: initial !important; } .mdl-step:not(:last-child) { margin-bottom: 24px; } .mdl-step:not(:last-child).is-active { margin-bottom: 36px; } .mdl-step .mdl-step-error-message { display: none; } .mdl-step > * { -webkit-animation: FadeIn 0.5s ease-in-out; -moz-animation: FadeIn 0.5s ease-in-out; -ms-animation: FadeIn 0.5s ease-in-out; animation: FadeIn 0.5s ease-in-out; } /* STEP ACTIVE */ .mdl-step.is-active .mdl-step__title { font-weight: bold; } .mdl-step.is-active .mdl-step__content { display: block; } .mdl-step.is-active .mdl-step__label-indicator { background-color: #2196F3; color: white; } .mdl-step.is-active .mdl-step__actions { -webkit-display: flex; -moz-display: flex; -ms-display: flex; display: flex; justify-content: flex-start; } .mdl-step.is-active .mdl-step__actions [data-stepper-next] { order: 1; margin-right: 8px; } .mdl-step.is-active .mdl-step__actions [data-stepper-cancel] { order: 2; } .mdl-step.is-active .mdl-step__actions [data-stepper-skip] { order: 3; margin-left: auto; } .mdl-step.is-active .mdl-step__actions [data-stepper-back] { order: 4; margin-left: auto; } /* STEP MOD COMPLETED */ .mdl-step--completed .mdl-step__label-indicator { background-color: #2196F3; } /* STEP MOD ERROR */ .mdl-step--error .mdl-step__title { color: #F44336; } .mdl-step--error .mdl-step-error-message { display: block; color: #F44336; font-weight: normal; } .mdl-step--error .mdl-step__label-indicator { background-color: #F44336 !important; font-weight: bold; } /* STEP MOD OPTIONAL */ /* STEP MOD TRANSIENT */ .mdl-step--transient .mdl-step__content { overflow: hidden !important; } .mdl-step__label { position: relative; -webkit-display: flex; -moz-display: flex; -ms-display: flex; display: flex; cursor: pointer; margin-bottom: 8px; padding: 12px 24px 24px 24px; align-items: center; } /* STEP LABEL MOD WITH SUBLABEL */ .mdl-step__label--with-sublabel { align-items: baseline; } /* STEP TITLE */ .mdl-step__title { -webkit-display: flex; -moz-display: flex; -ms-display: flex; display: flex; flex-flow: column nowrap; order: 2; width: 100%; } /* STEP TITLE MESSAGE */ .mdl-step__title-message { position: absolute; font-size: 12px; opacity: .7; font-weight: 400; top: 28px; } /* STEP LABEL INDICATOR */ .mdl-step__label-indicator { -webkit-display: flex; -moz-display: flex; -ms-display: flex; display: flex; order: 1; background-color: rgba(0, 0, 0, 0.3); border-radius: 100%; color: white; margin-right: 12px; margin-bottom: auto; } .mdl-step__label-indicator > :first-child { -webkit-display: flex; -moz-display: flex; -ms-display: flex; display: flex; font-size: 15px; width: 28px; height: 28px; align-items: center; justify-content: center; } /* STEP CONTENT */ .mdl-step__content { display: none; height: calc(100% - 132px); width: inherit; overflow: auto; margin-left: 64px; margin-right: 24px; } /* STEP ACTIONS */ .mdl-step__actions { display: none; padding-top: 16px; height: 48px; margin-left: 64px; margin-right: 24px; } .mdl-step__actions [data-stepper-next].mdl-button--raised.mdl-button--colored { background-color: #2196F3; box-shadow: none; } /* STEP TRANSIENT */ .mdl-step__transient { position: absolute; top: 72px; left: 64px; z-index: 2; -webkit-display: flex; -moz-display: flex; -ms-display: flex; display: flex; width: calc(100% - 88px); height: calc(100% - 132px); transition: 0.3s all ease-in-out; } /* STEP TRANSIENT OVERLAY */ .mdl-step__transient-overlay { content: ''; position: absolute; z-index: 3; width: 100%; height: 100%; top: 0; background-color: rgba(255, 255, 255, 0.8); } /* STEP TRANSIENT LOADER */ .mdl-step__transient-loader { z-index: 4; margin: auto; } /* STEPPER MOD HORIZONTAL */ @media only screen and (min-width: 841px) { .mdl-stepper--horizontal { -webkit-display: flex; -moz-display: flex; -ms-display: flex; display: flex; flex-direction: row; align-items: baseline; max-width: 840px; padding: 0; min-height: 576px; /* HORIZONTAL STEP */ /* HORIZONTAL STEP LABEL */ /* HORIZONTAL STEP CONTENT */ /* HORIZONTAL STEP ACTIONS */ /* STEPPER MOD HORIZONTAL + MOD LINEAR */ } .mdl-stepper--horizontal:before { content: ''; background-color: transparent; width: 100%; min-height: 84px; box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); position: absolute; top: 0; left: 0; } .mdl-stepper--horizontal > .mdl-step { position: static; -webkit-display: flex; -moz-display: flex; -ms-display: flex; display: flex; justify-content: center; align-items: initial; margin-top: 0 !important; margin-bottom: 0 !important; height: initial; max-height: 84px; overflow: hidden; /* STEP MOD COMPLETED */ } .mdl-stepper--horizontal > .mdl-step.is-active.mdl-step--transient:before { content: attr(data-step-transient-message); -webkit-animation: FadeInFromBottom 0.3s cubic-bezier(0, 0, 0, 0.99); -moz-animation: FadeInFromBottom 0.3s cubic-bezier(0, 0, 0, 0.99); -ms-animation: FadeInFromBottom 0.3s cubic-bezier(0, 0, 0, 0.99); animation: FadeInFromBottom 0.3s cubic-bezier(0, 0, 0, 0.99); position: absolute; padding-left: 24px; display: flex; font-size: 16px; justify-content: flex-start; align-items: center; width: calc(100% - 24px); height: 84px; background-color: white; top: 0; left: 0; z-index: 9; } .mdl-stepper--horizontal > .mdl-step .mdl-step__transient { top: 0; left: 0; width: 100%; height: 100%; } .mdl-stepper--horizontal > .mdl-step:not(:first-child):not(:last-child) { margin: auto auto; } .mdl-stepper--horizontal > .mdl-step:not(:last-child) { flex: 1; } .mdl-stepper--horizontal > .mdl-step:not(:last-child):after { content: ''; position: relative; flex: 1; top: 42px; width: 168px; margin-left: -12px; height: 1px; background-color: rgba(0, 0, 0, 0.1); } .mdl-stepper--horizontal > .mdl-step.mdl-step--completed .mdl-step__title > .mdl-step__title-text { font-weight: bold; } .mdl-stepper--horizontal .mdl-step__label { top: -48px; flex: initial; margin: 0; padding: 24px; min-height: 132px; transition: 0.025s border-radius linear; } .mdl-stepper--horizontal .mdl-step__label:hover { background-color: rgba(0, 0, 0, 0.06); } .mdl-stepper--horizontal .mdl-step__label:active { padding: 12px; margin: 12px; border-radius: 100%; } .mdl-stepper--horizontal .mdl-step__label > .mdl-step__title { width: initial; } .mdl-stepper--horizontal .mdl-step__label > .mdl-step__title > * { max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mdl-stepper--horizontal .mdl-step__label > .mdl-step__title > .mdl-step__title-message { position: relative; top: 0; line-height: 14px; } .mdl-stepper--horizontal .mdl-step__label > .mdl-step__label-indicator { margin-top: auto; } .mdl-stepper--horizontal .mdl-step > .mdl-step__content { position: absolute; top: 84px; left: 0; width: calc(100% - 48px); height: calc(100% - 192px); margin: 24px; } .mdl-stepper--horizontal .mdl-step > .mdl-step__actions { position: absolute; top: calc(100% - 84px); left: 0; margin: 0; padding: 24px; width: calc(100% - 48px); } .mdl-stepper--horizontal .mdl-step > .mdl-step__actions [data-stepper-next] { order: 4; margin-left: 8px; margin-right: 0; color: #2196F3; background-color: transparent; } .mdl-stepper--horizontal .mdl-step > .mdl-step__actions [data-stepper-cancel] { order: 3; margin-left: auto; } .mdl-stepper--horizontal .mdl-step > .mdl-step__actions [data-stepper-skip] { order: 2; margin-left: auto; } .mdl-stepper--horizontal .mdl-step > .mdl-step__actions [data-stepper-back] { order: 1; margin-left: 0; margin-right: auto; } .mdl-stepper--horizontal.mdl-stepper--linear > .mdl-step:not(.mdl-step--completed):not(.is-active) .mdl-step__title > .mdl-step__title-text { opacity: .5; } } 

what

Answer 1

Working demo: https://codepen.io/kumarrishikesh12/pen/jLNQRz

 <script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script> <p data-height="265" data-theme-id="dark" data-slug-hash="jLNQRz" data-default-tab="result" data-user="kumarrishikesh12" data-embed-version="2" data-pen-title="jLNQRz" class="codepen">See the Pen <a href="https://codepen.io/kumarrishikesh12/pen/jLNQRz/">jLNQRz</a> by Rishikesh kumar (<a href="https://codepen.io/kumarrishikesh12">@kumarrishikesh12</a>) on <a href="https://codepen.io">CodePen</a>.</p> 

---

And yes. Actuall. The problem arises from this css file. You need to copy all the Css into your Style.css and then change the following Css as shown below (Bcoz. Its appearance. Stepper Mod Horizontal width Style)

Change it

 /* STEPPER MOD HORIZONTAL */ @media only screen and (min-width: 841px) { .mdl-stepper--horizontal { -webkit-display: flex; -moz-display: flex; -ms-display: flex; display: flex; flex-direction: row; align-items: baseline; max-width: 840px; padding: 0; min-height: 576px; /* HORIZONTAL STEP */ /* HORIZONTAL STEP LABEL */ /* HORIZONTAL STEP CONTENT */ /* HORIZONTAL STEP ACTIONS */ /* STEPPER MOD HORIZONTAL + MOD LINEAR */ } 

To that

 /* STEPPER MOD HORIZONTAL */ @media only screen and (min-width: 901px) { .mdl-stepper--horizontal { -webkit-display: flex; -moz-display: flex; -ms-display: flex; display: flex; flex-direction: row; align-items: baseline; max-width: 900px; padding: 0; min-height: 1100px; /* HORIZONTAL STEP */ /* HORIZONTAL STEP LABEL */ /* HORIZONTAL STEP CONTENT */ /* HORIZONTAL STEP ACTIONS */ /* STEPPER MOD HORIZONTAL + MOD LINEAR */ } 

NOTE. Here the rule is used !important used to override previously assigned CSS declarations

---

HTML

 <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header bodyflow"> <header class="mdl-layout__header"> <div class="mdl-layout__header-row" style="padding-right:100px; width:100% !important;"> <!-- Title --> <span class="mdl-layout-title">IPET</span> <!-- Add spacer, to align navigation to the right --> <div class="mdl-layout-spacer"></div> <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right"> <label class="mdl-button mdl-js-button mdl-button--icon" for="fixed-header-drawer-exp"> <i class="material-icons">search</i> </label> <div class="mdl-textfield__expandable-holder"> <input class="mdl-textfield__input" type="text" name="sample" id="fixed-header-drawer-exp" /> </div> </div> <button id="demo-menu-lower-right" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"> <i class="material-icons">chat</i> </button> <ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right" for="demo-menu-lower-right"> <li class="mdl-menu__item">Some Action</li> <li class="mdl-menu__item">Another Action</li> <li class="mdl-menu__item">Disabled Action</li> <li class="mdl-menu__item">Yet Another Action</li> </ul> </div> </header> <main class="mdl-layout__content"> <section> <div class="mdl-grid"> <div class="mdl-cell mdl-cell--12-col"> <!-- markup --> <ul class="mdl-stepper mdl-stepper--linear mdl-stepper--horizontal" style="display:inline-block;height:100% !important;overflow:inherit !important;"id="ipet-stepper"> <li class="mdl-step mdl-step--editable"> <span class="mdl-step__label"> <span class="mdl-step__title"> <span class="mdl-step__title-text">Your Information</span> <span class="mdl-step__title-message">Edit this step later</span> </span> <span class="mdl-step__label-indicator"><span class="mdl-step__label-indicator-content">1</span> </span> </span> <div class="mdl-step__content" style="display:inline-block;height:100% !important; overflow:inherit !important;"> <div class="mdl-card-fullwide mdl-card"> <div class="mdl-card__title"> <h2 class="mdl-card__title-text">Your Profile Information</h2> </div> <div class="mdl-card__supporting-text mdl-grid mdl-cell mdl-cell--12-col" style="padding:0px;"> </div> <div class="mdl-grid"> <div id="fb" class="mdl-cell mdl-cell--6-col"> <div id="status"></div> <button id="loginFB" class="loginBtn loginBtn--facebook" onClick="testAPI();"> Continue with Facebook </button> </div> <!--- GOOGLE API ---> <div id="google" class=" mdl-cell mdl-cell--6-col"> <button id="googlelogin" class="loginBtn loginBtn--google" onClick="onSuccess()"> Continue with Google </button> </div> </div> <div id="gSignInWrapper"> </div> <div id="name"></div> <script>(function () { startApp();});</script> <div class="mdl-card__supporting-text mdl-grid"> <div class="mdl-card__title"> <h2 class="mdl-card__title-text">Your Profile</h2> </div> <div class="mdl-card__supporting-text mdl-grid"> <div class="mdl-cell mdl-cell--4-col"> <div id="profile" class="dropzone" style="margin-left: -14px;"></div> </div> <div class="mdl-cell mdl-cell--8-col" style=" margin-left: 7x;"> <form action="#"> <div class="mdl-grid"> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--6-col"> <input class="mdl-textfield__input" type="text" id="firstname"> <label class="mdl-textfield__label" for="firstname">First Name</label> </div> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--6-col"> <input class="mdl-textfield__input" type="text" id="lastname"> <label class="mdl-textfield__label" for="lastname">Last Name</label> </div> <!--- Birthday / Address Form ---> <div class="mdl-textfield mdl-js-textfield mdl-cell mdl-cell--1-col"> <i id="bdayicon" class="material-icons">cake</i> </div> <div class="mdl-textfield mdl-js-textfield mdl-cell mdl-cell--5-col tenpadtop"> <input class="mdl-textfield__input" type="date" id="date"> </div> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--6-col getmdl-select getmdl-select__fix-height"> <input class="mdl-textfield__input" id="gender" name="gender" value="" type="text" tabIndex="-1"/> <label class="mdl-textfield__label" for="gender">Gender</label> <ul id="gendermenu" class="mdl-menu mdl-menu--bottom-left mdl-js-menu" for="gender"> <li class="mdl-menu__item">F - Female</li> <li class="mdl-menu__item">M - Male</li> <li class="mdl-menu__item">X - Intersex</li> </ul> </div> <!--- Main contact ---> <div class="mdl-textfield mdl-js-textfield mdl-cell mdl-cell--1-col"> <i id="mainphoneicon" class="material-icons">phone</i> </div> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--11-col"> <input class="mdl-textfield__input" type="text" pattern="[0-9]{10}" id="phone"> <label class="mdl-textfield__label" for="phone">Phone</label> <span class="mdl-textfield__error">Digits only</span> </div> <div class="mdl-textfield mdl-js-textfield mdl-cell mdl-cell--1-col"> <i id="addressicon" class="material-icons">home</i> <div class="mdl-tooltip" data-mdl-for="addressicon"> Your home address </div> </div> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--11-col"> <input class="mdl-textfield__input" type="text" id="streetline"> <label class="mdl-textfield__label" for="streetline">Home Address</label> <div class="mdl-tooltip tooltip-fullwidth" data-mdl-for="streetline"> <p>Your address will be used to notify members that your pet has gone missing. </p> <small>You can also choose to notify members in your current area (because you're active or on holidays) <br>We will never give out your personal address to any 3rd party or user. </small> </p> </div> </div> <div class="mdl-textfield mdl-js-textfield mdl-cell mdl-cell--1-col"> </div> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--11-col"> <input class="mdl-textfield__input" type="text" id="suburb"> <label class="mdl-textfield__label" for="suburb">Suburb</label> </div> <div class="mdl-textfield mdl-js-textfield mdl-cell mdl-cell--1-col"> </div> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--4-col"> <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*{4}?" maxlength="4" name="zipcode" id="zip"> <label class="mdl-textfield__label" for="zip">Post Code</label> <span class="mdl-textfield__error">Invalid ZIPCODE</span> </div> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--4-col"> <input class="mdl-textfield__input" type="text" id="state" maxlength="3"> <label class="mdl-textfield__label" for="state">State</label> </div> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--3-col getmdl-select getmdl-select__fix-height"> <input class="mdl-textfield__input" id="country" name="country" value="" type="text" tabIndex="-1"/> <label class="mdl-textfield__label" for="country">Country</label> <ul id="countrymenu" class="mdl-menu mdl-menu--bottom-left mdl-js-menu" for="country"> </ul> </div> <div class="mdl-layout-spacer"></div> <div class="mdl-textfield mdl-js-textfield mdl-cell mdl-cell--1-col"> </div> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--11-col"> <textarea name="aboutme" class="mdl-textfield__input" rows= "3" type="text" id="aboutme"></textarea> <label class="mdl-textfield__label" for="aboutme">About Me</label> </div> </div> </form> </div> </div> </div> </div> <div class="mdl-step__actions"> <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-button--raised" data-stepper-next> Continue </button> <button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-cancel> Cancel </button> </div> </li> <li class="mdl-step"> <span class="mdl-step__label"> <span class="mdl-step__title"> <span class="mdl-step__title-text">Your Pets</span> </span> <span class="mdl-step__label-indicator"><span class="mdl-step__label-indicator-content">2</span> </span> </span> <div class="mdl-step__content"></div> <div class="mdl-step__actions"> <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-button--raised" data-stepper-next> Continue </button> <button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-cancel> Cancel </button> </div> </li> <li class="mdl-step"> <span class="mdl-step__label"> <span class="mdl-step__title"> <span class="mdl-step__title-text">Emergency Contacts</span> <span class="mdl-step__title-message">Who should we contact if your pet goes missing?</span> </span> <span class="mdl-step__label-indicator"><span class="mdl-step__label-indicator-content">3</span> </span> </span> <div class="mdl-step__content"></div> <div class="mdl-step__actions"> <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-button--raised" data-stepper-next> Continue </button> <button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-cancel> Cancel </button> </div> </li> </ul> </div> </div> </section> <footer class="android-footer mdl-mini-footer"> <div class="mdl-mini-footer--right-section"> <div class="mdl-mini-footer--left-section"> <ul class="mdl-mini-footer__link-list"> <li><a href="#">Help</a></li> <li><a href="#">Privacy and Terms</a></li> <li><a href="#">User Agreement</a></li> </ul> </div> <div class="mdl-mini-footer--right-section"> <a class="mdl-typography--font-light" href="#top"> Back to Top <i class="material-icons">expand_less</i> </a> </div> </div> </footer> </main> </div> 

---

NOTE. In the case of <embed> fragment does not check the working Working Link

Answer 2

HTML change

  /** remove inline css height and overflow it will enable scroll **/ <ul class="mdl-stepper mdl-stepper--linear mdl-stepper--horizontal" style="display:inline-block;"id="ipet-stepper"> <li class="mdl-step mdl-step--editable"> <span class="mdl-step__label"> <span class="mdl-step__title"> <span class="mdl-step__title-text">Your Information</span> <span class="mdl-step__title-message">Edit this step later</span> </span> <span class="mdl-step__label-indicator"><span class="mdl-step__label-indicator-content">1</span> </span> </span> /** remove inline css height and overflow it will enable scroll **/ <div class="mdl-step__content" style="display:inline-block;"> 

CSS change Add height property to determine height for mdl-stepper class

  .mdl-stepper { position: relative; font-family: "Roboto", sans-serif; background-color: white; display: block; box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); padding: 24px 0; max-width: 720px; width: 100%; border-radius: 2px; /**height property based on device screen height you could define it as required **/ height : 80vh;} 

Experiment with css height for mdl-stepper and mdl-step to figure out the appearance of the element. Avoid inline style with !important

https://codepen.io/anon/pen/ayoPRZ