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


children in flexbox if has display:flex, don't behave overflow.

example provided in codepen should self explanatory: http://codepen.io/sanjay1909/pen/vgrjpg

i not sure understood flexbox correctly 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; } 

a few things consider:

  • both groups of elements – .flexbox-inner , .block-inner – flex items. since children of flex container, doesn't matter if give them display:flex, display:block, display:table, whatever. flex items , accept flex properties.

  • the problem having has nothing overflow property. if remove overflow:auto in code, stacking differential persists.

  • the problem seeing exists in chrome only. if run codepen in firefox or ie11, you'll see both sets of flex items stack same. (they may render differently in browser, both overflow columns identical in ff , ie11.)

enter image description here

  • in chrome, if remove display:flex flex items, both columns match.

so, why adding display:flex flex items in chrome cause them collapse?

there's no clear answer , found nothing in flexbox spec. considering happens in chrome, may browser bug.


Comments

Popular posts from this blog

java - nested exception is org.hibernate.exception.SQLGrammarException: could not extract ResultSet Hibernate+SpringMVC -

sql - Postgresql tables exists, but getting "relation does not exist" when querying -

asp.net mvc - breakpoint on javascript in CSHTML? -