Укажите минимальную ширину в макете flexbox

Question

У меня есть следующий макет, который основан на Flexbox Bootstrap:

<div class="d-flex flex-row">
  <section class="left"></section>
  <section class="center"></section>
  <section class="right"></section>
</div>

И CSS этого:

.left {
    flex: 0 0 360px;
}

.right {
    flex: 0 0 400px;
}

.center { 
    flex: 1; 
}

Итак, с этим макетом у меня есть 2 слева и справаколонки, которые имеют фиксированную ширину и центр колонны жидкости.Мне интересно, есть ли способ указать минимальную ширину для центрального контейнера, чтобы он получал горизонтальную полосу прокрутки при достижении минимальной ширины из-за небольшой ширины браузера.

Спасибо!

Answer 1

Вы можете использовать min-width в элементе flex для определения минимальной ширины flex-shrink.С overflow-x вы определяете, как их поведение, когда дочерний узел переполняет его ширину содержимого.

EDIT # 1

Как указано Michael_B , вы можете использовать встроенныйВ решении FlexBox min-width не требуется.Решение состоит в том, чтобы установить flex-grow: 1;, flex-shrink: 0; и flex-basis: 100px; /* Or any value you want */.Сокращение для этих 3 свойств: flex: 1 0 100px;.

section {
  border: 1px solid black;
}

.left {
  flex: 0 0 360px;
}

.right {
  flex: 0 0 400px;
}

.center { 
    flex: 1 0 100px;
    white-space: nowrap;
    overflow-x: auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-row">
  <section class="left">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </section>
  <section class="center">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </section>
  <section class="right">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </section>
</div>

Answer 2

Просто добавьте следующие свойства стиля к элементу .center:

.center { 
    flex: 1 1 auto;
    min-width: 100px; /* Set value to whatever you want */
    overflow: auto; 
}

Пример Stackblitz