Flex - 制作儿童的父宽度？

Question

我有一个弹性框布局。我希望.outer-2的宽度为其子项的宽度，其中.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元素添加宽度或最小宽度将阻止他们的父级将其折叠。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;