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

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.

Answer 2

I have occasions where I do not know the number of elements that will be within an element, but I still want them to be layed out evenly. For instance if I had 3 elements their width would be 33%, but for 4 elements the width would be 25%. To get around this I set the width to 1% first, then set flex to 1.
.flex-container {
display: -webkit-box;
display: -moz-box;
display: -ms-box;
display: box;
}
.flex-element {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
box-flex: 1;
width: 1%;
}

Answer 3

I think you need to add display: -webkit-box to .a div{-webkit-box-flex:1;height:100px}