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: 
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%;
}

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