Могу ли я использовать CSS Flexbox для удаления столбцов?

Question

Есть ли способ, которым CSS flexbox удаляет столбцы (гибкие элементы), когда доступная недвижимость мала - аналогична функциональности, предоставляемой FooTable?

Answer 1

Элемент затянется до 0px, если необходимо. Скрыть содержимое можно с помощью overflow: hidden, , но следует опасаться, что это может создать проблемы в других сценариях.
Проверьте следующий фрагмент кода, чтобы увидеть результат:

.container { 
 
    display: flex; 
 
} 
 

 
.child1, .child3 { 
 
    flex: 1 0 50%; 
 
} 
 

 
.child2 { 
 
    flex: 1; 
 
    overflow: hidden; 
 
}

<div class="container"> 
 
    <div class="child1">child1</div> 
 
    <div class="child2">child2</div> 
 
    <div class="child3">child3</div> 
 
</div>

Другие предложения:

• Использование медиа-запросов, чтобы скрыть содержимое в зависимости от размера окна;
• Использовать медиа-запросы для применения свойства overflow в зависимости от размера окна;
• Если вы не хотите, чтобы скрыть это, идти с flex-wrap распространять ваши детали сгибать в 2+ строк