<!DOCTYPE html> <!-- Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/ --> <html> <head> <title> CSS Test: "flex-basis" and "flex" shouldn't impact child sizing inside of vertical "display: -webkit-box" container </title> <style> .box { display: -webkit-box; -webkit-box-orient: vertical; border: 1px solid black; margin: 5px 20px; height: 100px; float: left; /* For testing in "rows" */ font: 10px serif; } .box > *:nth-child(1) { background: turquoise; } .box > *:nth-child(2) { background: salmon; } .mh0 { /* Used in some children here, to disable modern-flexbox's "implied-minimum-size" feature, so that it can't inadvertantly be the thing that makes our rendering match the reference . */ min-height: 0; } br { clear: both; } /* The point of this testcase is to verify that none of the modern-flexbox styles below have any effect on the rendering. (This is worth checking because we coopt our modern-flexbox implementation in our emulation of legacy -webkit-box behavior.) */ .fb0 { flex-basis: 0; } .f1 { flex: 1; /* This shorthand sets flex-grow:1; flex-basis: 0 */ } .fb30px { flex-basis: 30px; } .f1_30px { flex: 1 30px; } </style> </head> <body> <!-- FIRST ROW: flex-basis is 0 --> <div class="box"> <div class="fb0">a</div> <div class="fb0 mh0">b</div> </div> <div class="box"> <div class="f1">a</div> <div class="f1 mh0">b</div> </div> <br> <!-- SECOND ROW: flex-basis is 30px --> <div class="box"> <div class="fb30px">a</div> <div class="fb30px mh0">b</div> </div> <div class="box"> <div class="f1_30px">a</div> <div class="f1_30px mh0">b</div> </div> </body> </html>