Css3 Flexbox 3 макет колонки небольшая ширина, растянуть среднюю и ширину: максимум 200 пикселей справа

Question

Я пытаюсь создать макет строки из 3 столбцов во flexbox.

Левый столбец должен иметь ширину 60 пикселей и не больше.

Затем центральный столбец должен растягиваться на 100% иправый столбец должен быть справа и шириной не более 200 пикселей.

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

А вот код:

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

Answer 2

Вы можете настроить свой код, как показано ниже:

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