flexbox 内的 CSS 可滚动 div 超出父 div

Question

I have a problem regarding CSS and flexbox / div heights .

My code needs to be IE11 compatible, ideally with no JS.

What I want to achieve: I am developing an app that is usually used on a desktop computer. It has a fixed header with navigation (needs to dynamically expand to the bottom when screen sizes are too small) and a fixed footer with fixed height.

Between is the content div. This div always takes the remaining space. Inside that content div are changing views. The most common one being a two column layout with a fixed width left div and a right div taking the remaining space.

Inside those divs may various elements be displayed. For example a search box and below a inside scrollable div with searchresults. Same on the right.

My problem is: I cannot get the scrollable divs to stay inside the parent container (left or right). They will always take up more space according to the height of the page header. The result is that I cannot scroll down to the last element in my list.

 /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* RESET END*/ /* BEGIN CUSTOM CSS */ body { height: 100vh; display: flex; flex-flow: column; overflow: hidden; } #background { /*height: 100vh;*/ background-color: #f1f1f1; flex: 1 1 auto; overflow: hidden; } #background:has(>#fixheader) { margin-top: 20px; } #content { display: flex; flex-flow: row; height: 100vh; overflow: hidden; } #fixheader { position: absolute; top: 50px; background-color: teal; right: 0; left: 0; } #header { background-color: blue; flex: none; background: green; } #left { background-color: gold; flex: 0 0 300px; overflow: hidden; } #right { background-color: red; flex: 1 1 auto; overflow: hidden; } #footer { background-color: crimson; flex: none; }.scrollable { background: grey; overflow-y: scroll; height: 100vh; }

 <div id="header"> <div id="heading"> Title </div> <div id="navigation"> HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3 </div> </div> <div id="background"> <div id="content"> <div id="fixheader"> Some more data, optional </div> <div id="left"> <div id ="search"> <form> <input type="text"/> <input type="button" value="search"/> </form> </div> <div class="scrollable"> <table> <tr><td>te14xt</td></tr> <tr><td>te13xt</td></tr> <tr><td>te12xt</td></tr> <tr><td>t11ext</td></tr> <tr><td>t10ext</td></tr> <tr><td>text9</td></tr> <tr><td>tex8t</td></tr> <tr><td>te7xt</td></tr> <tr><td>text6</td></tr> <tr><td>tex5t</td></tr> <tr><td>te4xt</td></tr> <tr><td>text3</td></tr> <tr><td>tex2t</td></tr> <tr><td>te1xt</td></tr> <tr><td>te14xt</td></tr> <tr><td>te13xt</td></tr> <tr><td>te12xt</td></tr> <tr><td>t11ext</td></tr> <tr><td>t10ext</td></tr> <tr><td>text9</td></tr> <tr><td>tex8t</td></tr> <tr><td>te7xt</td></tr> <tr><td>text6</td></tr> <tr><td>tex5t</td></tr> <tr><td>te4xt</td></tr> <tr><td>text3</td></tr> <tr><td>tex2t</td></tr> <tr><td>te1xt</td></tr> <tr><td>te14xt</td></tr> <tr><td>te13xt</td></tr> <tr><td>te12xt</td></tr> <tr><td>t11ext</td></tr> <tr><td>t10ext</td></tr> <tr><td>text9</td></tr> <tr><td>tex8t</td></tr> <tr><td>te7xt</td></tr> <tr><td>text6</td></tr> <tr><td>tex5t</td></tr> <tr><td>te4xt</td></tr> <tr><td>text3</td></tr> <tr><td>tex2t</td></tr> <tr><td>te1xt</td></tr> </table> </div> </div> <div id="right"> <div class="container"> <h1>HEADING</h1> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumv </div> <div class="scrollable"> <table> <tr><td>te14xt</td></tr> <tr><td>te13xt</td></tr> <tr><td>te12xt</td></tr> <tr><td>t11ext</td></tr> <tr><td>t10ext</td></tr> <tr><td>text9</td></tr> <tr><td>tex8t</td></tr> <tr><td>te7xt</td></tr> <tr><td>text6</td></tr> <tr><td>tex5t</td></tr> <tr><td>te4xt</td></tr> <tr><td>text3</td></tr> <tr><td>tex2t</td></tr> <tr><td>te1xt</td></tr> <tr><td>te14xt</td></tr> <tr><td>te13xt</td></tr> <tr><td>te12xt</td></tr> <tr><td>t11ext</td></tr> <tr><td>t10ext</td></tr> <tr><td>text9</td></tr> <tr><td>tex8t</td></tr> <tr><td>te7xt</td></tr> <tr><td>text6</td></tr> <tr><td>tex5t</td></tr> <tr><td>te4xt</td></tr> <tr><td>text3</td></tr> <tr><td>tex2t</td></tr> <tr><td>te1xt</td></tr> <tr><td>te14xt</td></tr> <tr><td>te13xt</td></tr> <tr><td>te12xt</td></tr> <tr><td>t11ext</td></tr> <tr><td>t10ext</td></tr> <tr><td>text9</td></tr> <tr><td>tex8t</td></tr> <tr><td>te7xt</td></tr> <tr><td>text6</td></tr> <tr><td>tex5t</td></tr> <tr><td>te4xt</td></tr> <tr><td>text3</td></tr> <tr><td>tex2t</td></tr> <tr><td>te1xt</td></tr> <tr><td>te13xt</td></tr> <tr><td>te12xt</td></tr> <tr><td>t11ext</td></tr> <tr><td>t10ext</td></tr> <tr><td>text9</td></tr> <tr><td>tex8t</td></tr> <tr><td>te7xt</td></tr> <tr><td>text6</td></tr> <tr><td>tex5t</td></tr> <tr><td>te4xt</td></tr> <tr><td>text3</td></tr> <tr><td>tex2t</td></tr> <tr><td>te1xt</td></tr> <tr><td>LAST ELEMENT</td></tr> </table> </div> </div> </div> </div> <div id="footer"> <div id="statusbar">Username</div> </div>

Answer 1

Make #left and #right flex and change #content height to 100%; will resolve your problem, try it.

#content {
  display: flex;
  flex-flow: row;
  height: 100%; 
  overflow: hidden;
}
#left {
  background-color: gold;
  flex: 0 0 300px;
  overflow: hidden;
  display: flex;
  flex-flow: column;
}
#right {
  background-color: red;
  flex: 1 1 auto;
  overflow: hidden;
  display: flex;
  flex-flow: column;
}

Full code here

 /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* RESET END*/ /* BEGIN CUSTOM CSS */ body { height: 100vh; display: flex; flex-flow: column; overflow: hidden; } #background { /*height: 100vh;*/ background-color: #f1f1f1; flex: 1 1 auto; overflow: hidden; } #background:has(>#fixheader) { margin-top: 20px; } #content { display: flex; flex-flow: row; height: 100%; overflow: hidden; } #fixheader { position: absolute; top: 50px; background-color: teal; right: 0; left: 0; } #header { background-color: blue; flex: none; background: green; } #left { background-color: gold; flex: 0 0 300px; overflow: hidden; display: flex; flex-flow: column; } #right { background-color: red; flex: 1 1 auto; overflow: hidden; display: flex; flex-flow: column; } #footer { background-color: crimson; flex: none; }.scrollable { background: grey; overflow-y: scroll; height: 100vh; }

 <div id="header"> <div id="heading"> Title </div> <div id="navigation"> HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3 </div> </div> <div id="background"> <div id="content"> <div id="fixheader"> Some more data, optional </div> <div id="left"> <div id ="search"> <form> <input type="text"/> <input type="button" value="search"/> </form> </div> <div class="scrollable"> <table> <tr><td>te14xt</td></tr> <tr><td>te13xt</td></tr> <tr><td>te12xt</td></tr> <tr><td>t11ext</td></tr> <tr><td>t10ext</td></tr> <tr><td>text9</td></tr> <tr><td>tex8t</td></tr> <tr><td>te7xt</td></tr> <tr><td>text6</td></tr> <tr><td>tex5t</td></tr> <tr><td>te4xt</td></tr> <tr><td>text3</td></tr> <tr><td>tex2t</td></tr> <tr><td>te1xt</td></tr> <tr><td>te14xt</td></tr> <tr><td>te13xt</td></tr> <tr><td>te12xt</td></tr> <tr><td>t11ext</td></tr> <tr><td>t10ext</td></tr> <tr><td>text9</td></tr> <tr><td>tex8t</td></tr> <tr><td>te7xt</td></tr> <tr><td>text6</td></tr> <tr><td>tex5t</td></tr> <tr><td>te4xt</td></tr> <tr><td>text3</td></tr> <tr><td>tex2t</td></tr> <tr><td>te1xt</td></tr> <tr><td>te14xt</td></tr> <tr><td>te13xt</td></tr> <tr><td>te12xt</td></tr> <tr><td>t11ext</td></tr> <tr><td>t10ext</td></tr> <tr><td>text9</td></tr> <tr><td>tex8t</td></tr> <tr><td>te7xt</td></tr> <tr><td>text6</td></tr> <tr><td>tex5t</td></tr> <tr><td>te4xt</td></tr> <tr><td>text3</td></tr> <tr><td>tex2t</td></tr> <tr><td>te1xt</td></tr> </table> </div> </div> <div id="right"> <div class="container"> <h1>HEADING</h1> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </div> <div class="scrollable"> <table> <tr><td>te14xt</td></tr> <tr><td>te13xt</td></tr> <tr><td>te12xt</td></tr> <tr><td>t11ext</td></tr> <tr><td>t10ext</td></tr> <tr><td>text9</td></tr> <tr><td>tex8t</td></tr> <tr><td>te7xt</td></tr> <tr><td>text6</td></tr> <tr><td>tex5t</td></tr> <tr><td>te4xt</td></tr> <tr><td>text3</td></tr> <tr><td>tex2t</td></tr> <tr><td>te1xt</td></tr> <tr><td>te14xt</td></tr> <tr><td>te13xt</td></tr> <tr><td>te12xt</td></tr> <tr><td>t11ext</td></tr> <tr><td>t10ext</td></tr> <tr><td>text9</td></tr> <tr><td>tex8t</td></tr> <tr><td>te7xt</td></tr> <tr><td>text6</td></tr> <tr><td>tex5t</td></tr> <tr><td>te4xt</td></tr> <tr><td>text3</td></tr> <tr><td>tex2t</td></tr> <tr><td>te1xt</td></tr> <tr><td>te14xt</td></tr> <tr><td>te13xt</td></tr> <tr><td>te12xt</td></tr> <tr><td>t11ext</td></tr> <tr><td>t10ext</td></tr> <tr><td>text9</td></tr> <tr><td>tex8t</td></tr> <tr><td>te7xt</td></tr> <tr><td>text6</td></tr> <tr><td>tex5t</td></tr> <tr><td>te4xt</td></tr> <tr><td>text3</td></tr> <tr><td>tex2t</td></tr> <tr><td>te1xt</td></tr> <tr><td>te13xt</td></tr> <tr><td>te12xt</td></tr> <tr><td>t11ext</td></tr> <tr><td>t10ext</td></tr> <tr><td>text9</td></tr> <tr><td>tex8t</td></tr> <tr><td>te7xt</td></tr> <tr><td>text6</td></tr> <tr><td>tex5t</td></tr> <tr><td>te4xt</td></tr> <tr><td>text3</td></tr> <tr><td>tex2t</td></tr> <tr><td>te1xt</td></tr> <tr><td>LAST ELEMENT</td></tr> </table> </div> </div> </div> </div> <div id="footer"> <div id="statusbar">Username</div> </div>

Answer 2

Apply the following CSS

#background {
  display: flex;
}
#content {
  /*height: 100vh; */
}
#left {
  display:flex;
  flex-direction:column;
}
.scrollable {
  /*height: 100vh; */
  flex-grow:1;
}

Full code:

 /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* RESET END*/ /* BEGIN CUSTOM CSS */ body { height: 100vh; display: flex; flex-flow: column; overflow: hidden; } #background { /*height: 100vh;*/ background-color: #f1f1f1; flex: 1 1 auto; overflow: hidden; display: flex; } #background:has(>#fixheader) { margin-top: 20px; } #content { display: flex; flex-flow: row; /*height: 100vh; */ overflow: hidden; } #fixheader { position: absolute; top: 50px; background-color: teal; right: 0; left: 0; } #header { background-color: blue; flex: none; background: green; } #left { background-color: gold; flex: 0 0 300px; overflow: hidden; display:flex; flex-direction:column; } #right { background-color: red; flex: 1 1 auto; overflow: hidden; } #footer { background-color: crimson; flex: none; }.scrollable { background: grey; overflow-y: scroll; /*height: 100vh; */ flex-grow:1; }

 <div id="header"> <div id="heading"> Title </div> <div id="navigation"> HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3HOME | PAGE1 | PAGE 2 | PAGE 3 </div> </div> <div id="background"> <div id="content"> <div id="fixheader"> Some more data, optional </div> <div id="left"> <div id ="search"> <form> <input type="text"/> <input type="button" value="search"/> </form> </div> <div class="scrollable"> <table> <tr><td>te14xt</td></tr> <tr><td>te13xt</td></tr> <tr><td>te12xt</td></tr> <tr><td>t11ext</td></tr> <tr><td>t10ext</td></tr> <tr><td>text9</td></tr> <tr><td>tex8t</td></tr> <tr><td>te7xt</td></tr> <tr><td>text6</td></tr> <tr><td>tex5t</td></tr> <tr><td>te4xt</td></tr> <tr><td>text3</td></tr> <tr><td>tex2t</td></tr> <tr><td>te1xt</td></tr> <tr><td>te14xt</td></tr> <tr><td>te13xt</td></tr> <tr><td>te12xt</td></tr> <tr><td>t11ext</td></tr> <tr><td>t10ext</td></tr> <tr><td>text9</td></tr> <tr><td>tex8t</td></tr> <tr><td>te7xt</td></tr> <tr><td>text6</td></tr> <tr><td>tex5t</td></tr> <tr><td>te4xt</td></tr> <tr><td>text3</td></tr> <tr><td>tex2t</td></tr> <tr><td>te1xt</td></tr> <tr><td>te14xt</td></tr> <tr><td>te13xt</td></tr> <tr><td>te12xt</td></tr> <tr><td>t11ext</td></tr> <tr><td>t10ext</td></tr> <tr><td>text9</td></tr> <tr><td>tex8t</td></tr> <tr><td>te7xt</td></tr> <tr><td>text6</td></tr> <tr><td>tex5t</td></tr> <tr><td>te4xt</td></tr> <tr><td>text3</td></tr> <tr><td>tex2t</td></tr> <tr><td>te1xt</td></tr> </table> </div> </div> <div id="right"> <div class="container"> <h1>HEADING</h1> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumv </div> <div class="scrollable"> <table> <tr><td>te14xt</td></tr> <tr><td>te13xt</td></tr> <tr><td>te12xt</td></tr> <tr><td>t11ext</td></tr> <tr><td>t10ext</td></tr> <tr><td>text9</td></tr> <tr><td>tex8t</td></tr> <tr><td>te7xt</td></tr> <tr><td>text6</td></tr> <tr><td>tex5t</td></tr> <tr><td>te4xt</td></tr> <tr><td>text3</td></tr> <tr><td>tex2t</td></tr> <tr><td>te1xt</td></tr> <tr><td>te14xt</td></tr> <tr><td>te13xt</td></tr> <tr><td>te12xt</td></tr> <tr><td>t11ext</td></tr> <tr><td>t10ext</td></tr> <tr><td>text9</td></tr> <tr><td>tex8t</td></tr> <tr><td>te7xt</td></tr> <tr><td>text6</td></tr> <tr><td>tex5t</td></tr> <tr><td>te4xt</td></tr> <tr><td>text3</td></tr> <tr><td>tex2t</td></tr> <tr><td>te1xt</td></tr> <tr><td>te14xt</td></tr> <tr><td>te13xt</td></tr> <tr><td>te12xt</td></tr> <tr><td>t11ext</td></tr> <tr><td>t10ext</td></tr> <tr><td>text9</td></tr> <tr><td>tex8t</td></tr> <tr><td>te7xt</td></tr> <tr><td>text6</td></tr> <tr><td>tex5t</td></tr> <tr><td>te4xt</td></tr> <tr><td>text3</td></tr> <tr><td>tex2t</td></tr> <tr><td>te1xt</td></tr> <tr><td>te13xt</td></tr> <tr><td>te12xt</td></tr> <tr><td>t11ext</td></tr> <tr><td>t10ext</td></tr> <tr><td>text9</td></tr> <tr><td>tex8t</td></tr> <tr><td>te7xt</td></tr> <tr><td>text6</td></tr> <tr><td>tex5t</td></tr> <tr><td>te4xt</td></tr> <tr><td>text3</td></tr> <tr><td>tex2t</td></tr> <tr><td>te1xt</td></tr> <tr><td>LAST ELEMENT</td></tr> </table> </div> </div> </div> </div> <div id="footer"> <div id="statusbar">Username</div> </div>

Answer 3

Add this to the CSS file. You'll be able to scroll to the end.

.scrollable table{
  margin-bottom: 25vh;
}