Flex height not working in Firefox/Edge like it does in Chrome (and IE...)

Question

In Chrome, Safari and surprisingly IE 11 if a container has display: flex; flex-direction: column; height: 100% you can set the child to flex: 1 and have it take as much height as it can without going beyond the bounds of it's container's height.

That allows me to put scrollbars not on the page but on the .scrollable container very easily.

Here's the example:

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

or

body, html {
  overflow: hidden;
  height: 120px;
}

.container {
  width: 500px;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  height: 100%;
}

.header {
  background: cyan;
  flex: 0 0 50px;
  margin: 5px 0
}

.content {
  flex: 1;
  display: flex;
}

.scrollable {
  width: 100%;
  overflow: auto;
}

.item {
  background: red;
  height: 10px;
  width: 100%;
  margin-bottom: 5px;
}

<div class="container">
  <div class="header">Header</div>
  <div class="content">
    <div class="scrollable">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </div>
</div>

However, running this in Chrome and Edge I'm forced to do the following on my .content container: * remove the flex: 1; line * add height: calc(100% - 60px) where 60px is my header's height + margin

Why is FF and Edge behaving differently, and how can I avoid using height calculations?

Thanks,

For those that want to see a codepen with the FF/Edge solution (which ofc works fine on other browsers too but not idea): https://codepen.io/anon/pen/EROqaG — LanFeusT, Jun 28 '18 at 22:22
IE11 [**doesn't fully support flexbox**](https://caniuse.com/#feat=flexbox) yet. You'll need fallback behaviour if you want to support IE. — Obsidian Age, Jun 28 '18 at 22:24
@ObsidianAge that's the thing, IE works fine. It's MS Edge that doesn't. — LanFeusT, Jun 28 '18 at 22:26
got it ! `min-height: 0;` will fix it ... it somehow related to the shrink past content size — Temani Afif, Jun 28 '18 at 22:26
@TemaniAfif I was just thinking how long time its gonna take before you figured that one out :) — Asons, Jun 28 '18 at 22:27
@LGSon haha :p since it behave differently within browser I will need time :p — Temani Afif, Jun 28 '18 at 22:29
Because a flex item's default `min-height` is `auto`, and won't allow it to be smaller than its content, and by setting it to `0` fix that (and FF and Edge won't comply w/o it) — Asons, Jun 28 '18 at 22:29
As stated by @TemaniAfif, just add `min-height: 0` to `.content` ([revised demo](https://codepen.io/anon/pen/pKQMbL)). It's explained in the duplicate post (see, in particular, the "Browser Rendering Notes" section in my answer). — Michael Benjamin, Jun 28 '18 at 22:30
I would add it as an answer but since it behave differently I don't have the explanation of this behavior and the min-height is well explained here : https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size — Temani Afif, Jun 28 '18 at 22:31
Thank you all! That makes sense, I did not know about the `min-height: auto` of flex items... — LanFeusT, Jun 28 '18 at 22:32
@TemaniAfif, it's explained in my answer in the dupe. At the bottom, under "Browser Rendering Notes". — Michael Benjamin, Jun 28 '18 at 22:33
@Michael_B yes right ... well you answers are very long so not easy to remember everything :p — Temani Afif, Jun 28 '18 at 22:34

Flex height not working in Firefox/Edge like it does in Chrome (and IE...)

0 Answers0