伸縮-使孩子的父母寬嗎？

Question

我有一個彈性框布局。 我希望.outer-2的寬度為其子.outer-1的寬度， .outer-1和.outer-1 outer-3占用其余空間。

我該如何實現？

的jsfiddle

 .container { display: flex; } .outer-1 { background: red; height: 100px; flex: 1; } .outer-2 { display: flex; flex: 1; } .outer-3 { background: blue; height: 100px; flex: 1; } .inner { flex-basis: 30px; background: green; height: 100px; margin: 0 3px; } 

 <div class="container"> <div class="outer-1"> </div> <div class="outer-2"> <div class="inner"> </div> <div class="inner"> </div> <div class="inner"> </div> </div> <div class="outer-3"> </div> </div> 

Answer 1

您需要更改container的第二個子代的flex屬性，以防止其增長以適合其父代。 這樣，並為每個.inner元素添加一個width或min-width，將防止其父級折疊它們。

 .container{ display: flex; } .outer-1{ background: red; height: 100px; flex: 1; } .outer-2{ display: flex; flex: 1; } .outer-3{ background: blue; height: 100px; flex: 1; } .inner{ width: 30px; flex: 1 0 30px; background: green; height: 100px; margin: 0 3px; } 

 <div class="container"> <div class="outer-1"> </div> <div class="outer-2"> <div class="inner"> </div> <div class="inner"> </div> <div class="inner"> </div> </div> <div class="outer-3"> </div> </div>