scrolling flex layout that works only in chrome

Question

I have created a header / footer, sidebar and scrolling main content as follows:

<div class="parent">
  <div>HEADER</div>
  <div class="main">
    <div class="side">
      SIDE
    </div>  
    <div class="inner-main">
      MAIN
      <ul>
        <li>testing 1.. 2.. 3..</li>             
        <li>testing 1.. 2.. 3..</li>
        <!-- and so on... -->
      </ul>
    </div>
  </div>
  <div>FOOTER</div>
</div>

My CSS is as follows:

body {
    height: 100vh;
    width: 100%;
    display: flex;
}
div.main {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
}
div.parent {
    display: flex;
    flex-direction: column;
    background-color: green;
    flex: 1 1 auto;
}
div.side {
    background-color: #454545;
}
.inner-main {
    background-color: pink;
    flex: 1 1 auto;
    overflow-y: scroll;

}

on chrome, the overflow-y scrolling works as it should, and the browser does not have a scroll bar, the div.inner-main scrolls through the ul as it should - shown below.

On all the other browsers, the browser creates an outer scrollbar, and the footer is not always displayed as it should be.

How do I correct this layout to have the inner scroller handle the overflow on firefox and (optionally) IE11?

Add `min-height: 0` to `.main`. https://www.bootply.com/LFhk7Nl7VL — Michael Benjamin, May 12 '18 at 21:59
For IE11, `auto` height isn't enough of a reference to trigger an overflow condition. It needs a *fixed height* on a flex item for scrolling to work. So on `.main`, instead of `flex: 1 1 auto`, use `flex: 1 1 1px`. https://www.bootply.com/fQ2Tvw5jHL — Michael Benjamin, May 12 '18 at 22:11

patelarpan · Accepted Answer · 2018-05-12T07:07:26.677

there is one possible solution is using height:100vh on the main element.

/* CSS used here will be applied after bootstrap.css */
body {

   width: 100%;
   display: flex;
    overflow:hidden;
    margin:0;
}
div.main {
   display: flex;
   flex-direction: row;
   flex: 1 1 auto;
}
div.parent {
   display: flex;
   flex-direction: column;
   background-color: green;
   flex: 1 1 auto;
}
div.side {
   background-color: #454545;
}
main {
   background-color: pink;
   flex: 1 1 auto;
    overflow-y: scroll;
    /* height: 100vh; */
    height: calc(100vh - 40px); /* viewport height - (header, footer) height */
}

<div class="parent">
  <div>HEADER</div>
  <div class="main">
    <div class="side">
      SIDE
    </div>  
    <main>
      MAIN
      <ul>
        <li>testing 1.. 2.. 3..</li>             
        <li>testing 1.. 2.. 3..</li>
        <li>testing 1.. 2.. 3..</li>
        <li>testing 1.. 2.. 3..</li>
        <li>testing 1.. 2.. 3..</li>
        <li>testing 1.. 2.. 3..</li>
        <li>testing 1.. 2.. 3..</li>
        <li>testing 1.. 2.. 3..</li>
        <li>testing 1.. 2.. 3..</li>
        <li>testing 1.. 2.. 3..</li>
        <li>testing 1.. 2.. 3..</li>
        <li>testing 1.. 2.. 3..</li>
        <li>testing 1.. 2.. 3..</li>
        <li>testing 1.. 2.. 3..</li>
        <li>testing 1.. 2.. 3..</li>
        <li>testing 1.. 2.. 3..</li>
        <li>testing 1.. 2.. 3..</li>
        <li>testing 1.. 2.. 3..</li>
        <li>testing 1.. 2.. 3..</li>
        <li>testing 1.. 2.. 3..</li>
        <li>testing 1.. 2.. 3..</li>
        <li>testing 1.. 2.. 3..</li>
        <li>testing 1.. 2.. 3..</li>
        <li>testing 1.. 2.. 3..</li>
        <li>testing 1.. 2.. 3..</li>
      </ul>
    </main>
  </div>
  <div>FOOTER</div>
</div>

scrolling flex layout that works only in chrome

1 Answers1