css3 Flexbox 3列布局小宽度，拉伸(stretch)中间一和宽度: max-200px on right

Question

我正在尝试在 flexbox 中进行 3 列行布局。

左列的宽度需要为 60 像素且不能更大。

然后中心列需要拉伸(stretch) 100%，右列需要在右边并且不超过 200px 宽度。

| width: 60px | Stretch 100%                           |  width: max-200px |

这是我的代码:

<div class="flex-container">
    <div>LEFT</div>
    <div style="flex-grow: 7">MIDDLE</div>
    <div style="flex-grow: 2">RIGHT</div>
</div>

这是CSS:

.flex-container {
  display: flex;
  align-items: stretch;
  flex-flow: row wrap;

}

.flex-container > div {
  margin: 10px;
  text-align: center;
  flex: 0 1 auto;
}

此时中间的 div 没有扩展，所以它把右列推到了右边。

我怎样才能做到这一点？

Answer 1

您可以像下面这样调整您的代码:

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

.flex-container>div {
  margin: 10px;
  text-align: center;
  border:1px solid;
  box-sizing:border-box;
}
.flex-container>div:first-child {
   width:60px; /*fixed width*/
   flex-shrink:0; /*avoid shriking*/
}
.flex-container>div:nth-child(2) {
  flex-grow:1; /*can grow*/
}
.flex-container>div:nth-child(3) {
  flex-grow:1;  /*can grow*/
  max-width:200px; /*max-width*/
}

<div class="flex-container">
  <div>LEFT</div>
  <div>MIDDLE</div>
  <div>RIGHT</div>
</div>