CODEWITHSUNDEEP
htmlcssflexbox
TKoL
TKoL

Reputation: 13902

Display:flex and scrolling inner divs

https://jsfiddle.net/wqmm0kxb/5/

html:

<div class="full">
  <header><h1>header stuff</h1></header>
  <section>
    <div>
       {lots and lots of content}
    </div>
    <div>b</div>
    <div>c</div>
  </section>
</div>

css:

.full {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;

   header {
      flex: 78px 0 0;
      background: #ececec;
      color: black;
      padding-left: 33px;
  }

  section {
    flex: auto 1 1;
    display: flex;
    align-items: stretch;

    > div {
      flex: auto 1 1;
      overflow-y: auto;
    }
  }

}

My outer container, '.full', takes up the full width and height of the screen, and uses display:flex to make sure that the header + section children stretch to take up all the space beneath them.

Now, what I want is naturally for the header to take up 78px and the section to take up {full height - 78px} -- but without doing anything like calc preferrably. And I want to be able to scroll in the div children of section, without scrolling affecting the other divs or the page as a whole.

This works perfectly in Chrome, but open up my fiddle in firefox, edge, ie and it doesn't work as expected. Section gets the height of {lots and lots of content} rather than only taking the remaining space of '.full'

What should I do to achieve the Chrome-like layout that I'm expecting?

Upvotes: 0

Views: 209

Answers (1)

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13998

Apply the overflow-y:auto for your section also, that will fix the issue in IE and Firefox.

section {
  flex: auto 1 1;
  display: flex;
  align-items: stretch;
  overflow-y: auto;

  > div {
    flex: auto 1 1;
    overflow-y: auto;
  }
}

Fiddle DEMO

Upvotes: 1

Related Questions