Sanjay Sanjay - 7 months ago 53
HTML Question

Overflow:auto inside a flexbox behaves differently for children with display:block and display:flex

Children in flexbox if it has

display:flex
, they don't behave well with
overflow
.

Example I provided in codepen should be self explanatory:
http://codepen.io/sanjay1909/pen/vGrJpG

I am not sure I understood flexbox correctly for flex values.

<div class="hbox">
<div class="vbox resizingDiv">
<div class="flexbox-item" style="flex-direction:column;overflow:auto">
<div class="flexbox-inner">1</div>
<div class="flexbox-inner">2</div>
<div class="flexbox-inner">3</div>
<div class="flexbox-inner">4</div>
<div class="flexbox-inner">5</div>
<div class="flexbox-inner">6</div>
<div class="flexbox-inner">7</div>
<div class="flexbox-inner">8</div>
<div class="flexbox-inner">9</div>
</div>
<div class="flexbox-item ">flex-1</div>
<div class="flexbox-item ">flex-1</div>
<div class="flexbox-item ">flex-1</div>
</div>
<div class="vbox resizingDiv">
<div class="flexbox-item" style="flex-direction:column;overflow:auto">
<div class="block-inner">1</div>
<div class="block-inner">2</div>
<div class="block-inner">3</div>
<div class="block-inner">4</div>
<div class="block-inner">5</div>
<div class="block-inner">6</div>
<div class="block-inner">7</div>
<div class="block-inner">8</div>
<div class="block-inner">9</div>
</div>
<div class="flexbox-item ">flex-1</div>
<div class="flexbox-item ">flex-1</div>
<div class="flexbox-item ">flex-1</div>





.hbox {
display: flex;
flex-direction:row;
background-color: #034;
padding: 4px;
}
.vbox {
display: flex;
flex-direction:column;
background-color: #0aa;
margin-top: 5px;
padding: 4px;
}
.resizingDiv {
width: 100px;
height: 400px;
}

.flexbox-item {
display:flex;
background-color: #ccc;
flex: 1;
margin-bottom: 2px;
overflow:auto
}

.flexbox-inner{
display:flex;
background-color: #aac;
margin-bottom:2px;
}

.block-inner{
background-color: #aac;
margin-bottom:2px;
}

Answer

A few things to consider:

  • Both groups of elements – .flexbox-inner and .block-inner – are flex items. Since they are children of a flex container, it doesn't matter if you give them display:flex, display:block, display:table, whatever. They are flex items and will accept flex properties.

  • The problem you are having has nothing to do with the overflow property. If you remove the overflow:auto in your code, the stacking differential persists.

  • The problem you are seeing exists in Chrome only. If you run your codepen in Firefox or IE11, you'll see that both sets of flex items stack the same. (They may render differently in another browser, but both overflow columns are identical in FF and IE11.)

enter image description here

  • In Chrome, if you remove display:flex from the flex items, both columns will match.

So, why does adding display:flex to the flex items in Chrome cause them to collapse?

There's no clear answer for this and I found nothing in the flexbox spec. Considering it only happens in Chrome, it may just be a browser bug.

Comments