Я пытаюсь получить контейнер, в котором каждый элемент имеет одинаковый размер, за исключением случая, когда к элементу добавлен класс, который определяет размер. В этом случае элемент принимает ширину добавленного класса, а другой элемент делит равным образом левое пространство.
Я создаю авто класс, который используется всеми предметами.
flex-grow: 1; которые позволяют элементу сгибаться-сжиматься: 1; Все для уменьшения и гибкой основы: авто; to дает всем элементам одинаковый размер, но когда я добавил небольшой класс с шириной 5%, он не работал
.flex-container {
background-color: #F4F7F8;
resize: horizontal;
overflow: hidden;
display: flex;
margin: 1em;
}
.auto {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
border: 5px solid black;
}
.small {
width: 5% !important;
}
<div class="flex-container">
<div class="item auto small">small</div>
<div class="item auto">auto</div>
<div class="item auto">auto</div>
</div>