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

Question

我正在尝试在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>

下面是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>

​

Answer 2

通过在元素上使用flex:0 0 auto，您可以指定宽度应由其内容和/或css宽度属性(width / min-width / max- width )“定义”。

​

.container{
  display:flex;
}
.container div{
  height:500px;
}
.container__left{
  background-color:red;
  width:60px;
  flex:0 0 auto;
}
.container__center{
  background-color:green;
  flex:1;
}
.container__right{
  background-color:blue;
  max-width:200px;
  flex: 0 0 auto
}

<div class="container">
  <div class="container__left">left</div>
  <div class="container__center">center</div>
  <div class="container__right">right and other things in here that should be no more than 200px</div>
</div>

​