3

I try to have a div to fill its parent, which has been positioned with flexbox layout. As you can see in the following jsfiddle, the div's height doesn't fill the parent's height.

Why doesn't it work? (update from @mrmcgreg: it doesn't work on Chrome but works on FF)

https://jsfiddle.net/z73pjtox/1/

html:

<header id="header">
  header
</header>

<div id="content">
      <div>
        height: 100%
      </div>
</div>

css:

html, body {
  height: 100%;
}
body {
  margin: 0;
  display: flex;
  flex-flow: column;
}
#header {
  flex: 0 1 auto;
  background-color: green;
}
#content {
  flex: 1 1 auto;
  background-color: blue;
}
#content div {
  height: 100%;
  background-color: red;
}
Matthew
  • 10,988
  • 11
  • 54
  • 69
  • 1
    It does what you want in FF. Just an observation. – mrmcgreg Jul 30 '16 at 12:40
  • @mrmcgreg hah thanks for the info, I am developping for Chrome-only users (intranet), so it didn't came into my mind testing on FF. It's a pity that on Chrome it doesn't work the same – Matthew Jul 30 '16 at 12:42
  • 2
    It'll work in chrome if you declare `display: flex` for the `#content` element as well, remove the `height: 100%` rule declared on the nested `#content div` element, then add `flex: 1` to this element as well so that it can fill up any available space. **Fiddle:** https://jsfiddle.net/hLrsrd33/ – UncaughtTypeError Jul 30 '16 at 12:56

1 Answers1

0

I checked your fiddle. Seems to be working here in Firefox 47 on Mac. What browser are you using?

I forked the fiddle and changed a few settings to make sure it was doing what was expected, but it worked just the same. However in an older version of Safari it doesn't work here. Maybe try adding the vendor prefixes and see if that helps?

Check this link on CSS Tricks for all the prefixes.

fiddle

html, body {
  height: 100%;
}
body {
  margin: 0;
  display: flex;
  flex-direction: column;
}
#header {
  height:30px;
  background-color: green;
}
#content {
  display:flex;
  flex-direction:column;
  flex:1;
  background-color: blue;
}
#content div {
  flex:1;
  height: 100%;
  background-color: red;
}
liquidRock
  • 327
  • 2
  • 12
  • It was working on FF but not on Chrome. Check my jsfiddle on Chrome, and yours. How do you got it working? Trying to figure it out – Matthew Jul 30 '16 at 12:49
  • Hey man. I updated my code and the fiddle link. It works in Chrome and Firefox here on Mac. I Just made the content a flexbox and changed both to flex-direction instead of flex-flow. I haven't used flex a lot so hopefully this is right :) If it works... – liquidRock Jul 31 '16 at 23:54