Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Nested flexboxes works differently across browsers

I have a small example of a nested flexbox setup: http://jsfiddle.net/ThomasSpiessens/MUrPj/12/

In this example the following applies:

  • CSS 'box' classes use flexbox properties on which only the boxContent is told to grow. For specific CSS properties and values, please check the fiddle.
  • 'fullSize' just sets both width and height to 100%.

When you check this fiddle with Firefox and Chrome you get different results. In Firefox it does what I would suppose it has to do, which is stretching the inner .boxContent. In Chrome however, the inner .boxContent doesn't get stretched.

Would anyone have an idea how to make the content stretch in Chrome as well ? perhaps a specific webkit property that is missing ?

.fullSize {    width: 100%;    height: 100%;    margin: 0;    padding: 0;  }    .box {    display: -webkit-box;    display: -moz-box;    display: -ms-flexbox;    display: -webkit-flex;    display: flex;    -webkit-box-orient: vertical;    -moz-box-orient: vertical;    -ms-flex-direction: column;    -webkit-flex-direction: column;    flex-direction: column;    background-color: brown;  }      /* line 7, ../../app/styles/_layout.scss */    .boxHeader {    -ms-flex: 0 0 auto;    -webkit-flex: 0 0 auto;    flex: 0 0 auto;    background-color: green;  }      /* line 12, ../../app/styles/_layout.scss */    .boxContent {    -ms-flex: 1 0 auto;    -webkit-flex: 1 0 auto;    flex: 1 0 auto;    -webkit-box-flex: 1.0;    background-color: yellow;  }      /* line 18, ../../app/styles/_layout.scss */    .boxFooter {    -ms-flex: 0 1 auto;    -webkit-flex: 0 1 auto;    flex: 0 1 auto;    background-color: cornflowerblue;  }    .moreblue {    background-color: blue;  }    .moregreen {    background-color: darkgreen;  }    .red {    background-color: red;  }
<div class="box fullSize">    <div class="boxHeader">HEADER</div>    <div class="boxContent">      <div class="box fullSize">        <div class="boxHeader moregreen">INNER HEADER</div>        <div class="boxContent red">CONTENT CONTENT CONTENT</div>        <div class="boxFooter moreblue">INNER FOOTER</div>      </div>    </div>    <div class="boxFooter">FOOTER</div>  </div>
like image 997
Thomas Avatar asked Sep 05 '13 14:09

Thomas


People also ask

Can Flex containers be nested?

You can create two dimensional layouts by nesting a flex container inside another one. Flexbox is inherently a one dimensional layout model. Flex items within a flex container can be laid out either horizontally or vertically, but not both.


1 Answers

Unless you need that extra div, remove it. There is sometimes a difference between the height of an element and its length along the main axis (column orientation), which is causing some confusion here. Basically, it looks like it is taller than the browser believes it to be, which is why height: 100% doesn't work like you expect (I'm not certain which behavior is correct in this instance).

For whatever reason, promoting the element to a flex container works.

http://jsfiddle.net/MUrPj/14/

<div class="box fullSize">     <div class="boxHeader">HEADER</div>     <div class="boxContent box">         <div class="boxHeader moregreen">INNER HEADER</div>         <div class="boxContent red">CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT</div>         <div class="boxFooter moreblue">INNER FOOTER</div>     </div>     <div class="boxFooter">FOOTER</div> </div> 
like image 132
cimmanon Avatar answered Sep 19 '22 05:09

cimmanon