Центральная авторазмерная колонна

Question

Как мне получить макет из 3 столбцов, в котором центральный столбец автоматически расширяется для содержимого, но остается центральным, а левый и правый столбцы сжимаются по мере необходимости?

Мне сказали, что это можно сделатьс flexbox, но я не могу найти пример, где это делает то, что мне нужно.

Answer 1

Дайте flex: 1 элементам влево и вправо flex и flex: 0 0 auto (потому что по умолчанию 0 1 auto и вы не хотите, чтобы значение flex-shrink было1) для элемента middle flex - см. Демонстрацию ниже:

.wrapper {
  display: flex;
}

.wrapper>* {
  border: 1px solid;
  flex: 1;
}

.middle {
  flex: 0 0 auto;
}

<div class="wrapper">
  <div>left</div>
  <div class="middle">Lorel ipsum</div>
  <div>right</div>
</div>