javascript - Flex layout - cell partially collapses in chrome -

so i've got bit of weird issue happening in chrome (latest version on mac). here fiddle replicates it: http://jsfiddle.net/mwznjnoc/1/

you'll see search bar has set height of 40px. however, right side red cell has content makes scroll, squishes search bar. moving search bar outside of div in , under header div fixes issue, cannot fix way (the search bar part of view content, gets rendered in div in). removing height: 100%; html , body stops happening, not fix need viewport height 100%. layout works fine in other browsers i've tested with, have idea why happening or way adjust layout prevent it? time in advance!

you forgot flex rule on .search box.

1. because being part of flex, should remove style height:40px .search box.
2. then provide flex-grow , flex-shrink 0, , flex-basis 40px.
3. you may combine 3 1 flex: 0 0 40px. force layout contain .search box within 40px , let other blocks grow or shrink in available space.

changes in html markup:

<div class="search">search bar</div> <!-- remove inline style height --> 

changes in css:

.search {     flex: 0 0 40px;    /* add flex rule here */     background: #ccc; } 

your fiddle: http://jsfiddle.net/abhitalks/mwznjnoc/3/