Css3 Flexbox 3列布局小宽度，中间拉伸，宽度：右侧最大-200px

我试图在flexbox中制作一个3列的行布局

左列的宽度必须为60px，不能更大

然后，中心柱需要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>

此时，中间的div没有展开，因此它将右列向右推

---

我如何才能做到这一点？

您可以按如下方式调整代码：

.flex容器{
显示器：flex；
柔性流：行换行；
}
.flex容器>div{
利润率：10px；
文本对齐：居中；
边框：1px实心；
框大小：边框框；
}
.flex容器>div:第一个子容器{
宽度：60px；/*固定宽度*/
弹性收缩：0；/*避免收缩*/
}
.flex容器>分区：第n个子项（2）{
flex增长：1；/*可以增长*/
}
.flex容器>分区：第n个子项（3）{
flex增长：1；/*可以增长*/
最大宽度：200px；/*最大宽度*/
}

左边
中间的
正确的

通过在元素上使用flex:0 0 auto，您可以指定宽度应由其内容和/或css宽度属性（宽度/最小宽度/最大宽度）来“定义”

.container{
显示器：flex；
}
.货柜组{
高度：500px；
}
.集装箱左{
背景色：红色；
宽度：60px；
flex:0自动；
}
.货柜中心{
背景颜色：绿色；
弹性：1；
}
.container____右{
背景颜色：蓝色；
最大宽度：200px；
flex:0 0自动
}

左边
居中
对，这里的其他东西应该不超过200px

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

}

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