something about display:-webkit-box; -webkit-box-flex:1

Question

Try to imagine a situation

there is a div and inside the container there are three divs ,

and sometimes we need to let the inside divs self-adaption.

like this

css:

.a{display:-webkit-box;width:300px;height:100px;background:#222}
.a div{-webkit-box-flex:1;height:100px}
.a-1{background:red}
.a-2{background:yellow}
.a-3{background:blue}

html:

<div class="a">
    <div class="a-1">abc</div>
    <div class="a-2">abcdddd</div>
    <div class="a-3">abcdddddddde</div>
</div>    

but a-1 ,a-2 , a-3 do not self-adaption .i mean a-1 a-2 a-3 do not equal in length. it seems also depends on the text length.

how solve?

Answer 1

Looks like you have misunderstood the purpose of the flexible box layout. It works by taking the unused space in the containing element and adding into its children. So for example if your containing box is 300px, and you have three elements originally 80px, 100px, and 60px, then you have 300-80-100-60 = 60px. Then if your three child elements all have a flex value of 1 then it allocates 60/(3*1) = 20px to each. So the child sizes are now 100px, 120px, and 80px.

For your example, as you want them equal sizes, you should make the -webkit-box-flex to 0 for all three children, but set their width (or height if appropriate) to 33.33% each.