Предотвращение сокращения flexbox

Я использую flexbox для компоновки страницы, потому что растущее поведение полезно. Но я бы хотел полностью предотвратить сокращение поведения.

В любом случае, чтобы управлять этим?

Пример кода:

<div class="flex-vertical-container">
    <div class="flex-box">
         This one should grow but not shrink
    </div>
    <div></div>
    <div></div>
</div>

CSS

.flex-vertical-container {
    display: flex;
    flex-direction: column;
}

.flex-box {
    flex: 1;
}

Ответы

Ответ 1

Попробуйте установить свойство flex-shrink на 0 на .flex-box.

Ответ 2

Добавьте min-width с тем, что вы хотите наименьшее возможное значение поля. Flexbox не будет уменьшать ширину ниже минимальной ширины.

Ответ 3

Вы можете попробовать применить к ребенку:

.flex-box{
    width: max-content;
}

Конечный результат:

.flex-vertical-container{
  display: flex;
  flex-direction: column;
}
.flex-vertical-container div{
  background: gray;
}
.flex-box{
  width: max-content;
}

<div class="flex-vertical-container">
    <div class="flex-box">
         This one should grow but not shrink
    </div>
    <div>This is shrinking</div>
    <div>This is shrinking</div>
</div>