3

I have this layout. A container div set to

.container {
  width: 80vw;
  max-height: 75vh;
  margin: auto;}

Inside that is a panel div with header and body divs, then my nested flexboxes. See image below:

enter image description here

The main flexbox div is set to row, with 2 divs in it which are flexbox column.

Inside those there is one div each which has overflow-y set to scroll, and they both have a lot of content.

This is working perfectly in Chrome and Safari, but in IE11 the scrolling divs do not scroll -- they go to the full height of their content and spill out of the container.

To be clear: only those divs in yellow should scroll.

What am I missing here?

Update

I have created a stripped-down pen: http://codepen.io/smlombardi/pen/reodZE?editors=1100

Community
  • 1
  • 1
Steve
  • 14,401
  • 35
  • 125
  • 230
  • Checking http://caniuse.com/#feat=flexbox you can see that IE 11 has partial support to the `flexbox` css property – Anfuca May 05 '16 at 12:04
  • Yes, but none of the known issues relate to this, – Steve May 05 '16 at 12:29
  • I had similar problems using flexbox and scrollable content in IE11 and was able to solve it using the `flex` property (see https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-13), which sets `flex-basis` "intelligently" – Jon Onstott May 22 '17 at 16:41

3 Answers3

3

I see this question already has an accepted answer, but that solution didn't work for me. Something else did so I thought I would share for anyone encountering this in future.

My layout was very similar to this. There was a lot of nesting. Getting it to work in Chrome was quite straight forward. However, getting it to work in Firefox would take me another day of research & experimentation. In hindsight, it was probably because I didn't understand flex-box well enough.

To get a more complicated flex-box layout working cross-browser (by working, I mean flex children scrolling for overflowing content), do the following:

  1. give outermost container a predefined height
  2. use Flexbox for all containers that wrap the scrollable container
  3. Since content lays vertically on the page by default, it's recommended to use: flex-direction: column
  4. for Firefox: explicitly set min-height: 0 for every flex-item parent all the way up to the outermost flex-box.
  5. if you have multiple flex children and the child that will scroll needs to expand to fill all available space, use flex-grow: 1

I got this from an article by Stephen Bunch, which I think was originally posted somewhere on SO too. Kudos to him!

Still, your scrolling flex child container will not work in IE11. It will expand to the full height of the contained content.

To fix it in IE11, do this:

  • Add overflow: hidden; to all its parents

Thanks to the original poster geon on SO in another related question.

Also, having a diagram of the flex layout was vastly more helpful than giant walls of code while researching to fix my own flex layout issues. Thanks OP!

Hoped that helped. It certainly did for me. All my flex-box issues for this more complicated layout.

PS: if this didn't solve it for you, maybe consider this list of flex-box bugs and their workarounds / solutions: https://github.com/philipwalton/flexbugs

bot19
  • 664
  • 8
  • 18
1

Not sure if this is the best way, but I simplified this down to a simple bootstrap row, 2 columns.

I set the container to 75vh, and the 2 columns to the same 75vh.

The key was to set the 2 scrolling divs to flex-basis: something rem:

  .search-results {
    overflow-y: scroll;
    margin-bottom: 10px;
    flex-basis: 10rem;
    background-color: #c4decf;
  }

  .accordions {
    overflow-y: scroll;
    overflow-x: hidden;
    flex-basis: 40rem;
    flex-grow: 1;
    background-color: #f0f0f0;
    padding: 10px;
  }

See updated codepen: http://codepen.io/smlombardi/pen/WwLgyV?editors=1100

Steve
  • 14,401
  • 35
  • 125
  • 230
0

None of the answers here worked for me.

My experience with IE is that both inheritance and properties needs to be set explicitly a lot of the time and the same was true here. The fix in my case was then to set the max height of container element to 90vh and overflow-y to hidden. The child element (scroll element) was set to inherit the max-height with overflow-y set to auto. Simply setting it to 100% did not work, really the keyword was "inherit"

all other parent elements got overflow hidden

cecsil
  • 51
  • 5