Picked up this in SO itself - the 'height calculation' made by browsers (when we have not explicitly set a height but we have set a min-height) for a container that has children (who have height in percentages with respect to the container):
Without setting a height, I set
min-heightand it doesn't work- note that the computed value of height is the value I gave formin-height. The children do not get 50% height that I have given them - see below:* { box-sizing: border-box; } .inline-container, .block-container, .float-container, .inline-block-container { border: 1px solid red; min-height: 100px; } .inline-container > * { border: 1px solid; height: 50%; } .block-container > * { border: 1px solid; height: 50%; } .float-container > * { float: left; border: 1px solid; height: 50%; } .float-container:after { clear: both; content: ''; display: block; } .inline-block-container > * { display: inline-block; border: 1px solid; height: 50%; }
See Question&Answers more detail:os<body> <div class="inline-container"> <span>Inline 1</span> <span>Inline 2</span> </div> <div class="block-container"> <div>Block 1</div> <div>Block 2</div> </div> <div class="float-container"> <div>Float 1</div> <div>Float 2</div> <div>Float 3</div> </div> <div class="inline-block-container"> <div>Inline block 1</div> <div>Inline block 2</div> <div>Inline block 3</div> </div> </body>
