1

The following code displays properly in FF but when executed in Chrome div 'c''s height doesn't seem to know what 100% means. Anyone know why?

#flex {
  display: flex;
  align-self: stretch;
  flex-flow: column;
  height: 300px;
  width: 100%;
}
#a {
  order: 1;
  flex: 0 1 auto;
  background-color: red;
}
#b {
  order: 2;
  flex: 1 1 auto;
  background-color: blue;
}
#c {
  float: left;
  margin: 5px;
  width:-moz-calc(100% - 10px);
  width:-webkit-calc(100% - 10px);
  height:-webkit-calc(100% - 10px);
  height:-moz-calc(100% - 10px);
  background-color: yellow;
  overflow-y: scroll;
 }
<div id='flex'>
  <div id='a'>testa</div>
  <div id='b'>
   <div id='c'>test</div>
  </div>
</div>

Here's the jsfiddle page for the image attached to this question:

https://jsfiddle.net/uya5sboy/

proper output

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Brad.Smith
  • 1,071
  • 3
  • 14
  • 28

3 Answers3

0

This is because the parent doesn't have a specified height. Webkit browsers adhere more explicitly to the spec. In this case 'percentage' is specifying this element's height related to its parent element. If the parent doesn't have an explicitly specified height then the percentage value computes to "auto" (unless this element's position is absolute).

Shawn Cothran
  • 39
  • 6
  • Please provide proper attribution when posting material authored by others.Your second paragraph comes directly from the [**CSS specification**](https://www.w3.org/TR/CSS21/visudet.html#propdef-height). For guidance see [**here**](http://stackoverflow.com/help/referencing) and [**here**](http://meta.stackexchange.com/q/160077/300177). – Michael Benjamin May 09 '16 at 23:23
0

Instead of setting the height using a percentage since you already set a height of 300px to its parent why not just set the height manually? https://jsfiddle.net/uya5sboy/4/

height: 272px;

Adam Buchanan Smith
  • 9,422
  • 5
  • 19
  • 39
0

Had that problem a while ago. To fix it, just add height:100% to your parent container. 

#b {
  order: 2;
  flex: 1 1 auto;
  background-color: blue;
  height: 100%;
}

jsfiddle: https://jsfiddle.net/uya5sboy/3/

Not the nicest solution though, but it works and is pretty simple.

Daniel Z.
  • 2,988
  • 2
  • 19
  • 23
  • In my example you can't do that because the flexboxes are stacked. 100% is 100% of div a, not just b. – Brad.Smith May 09 '16 at 19:36
  • Huh? I dont get it. Doesnt it work like expected in the fiddle? The height: 100% on div b doesnt have any real effect at all. – Daniel Z. May 09 '16 at 19:41
  • put a real height on div a like 100px, rerun the fiddle, and you'll really see the difference of what putting 100% height on div b does. – Brad.Smith May 09 '16 at 19:45