Возможно ли использование контейнера только для CSS?

Question

Моя цель - создать обертку содержимого, причем каждый элемент имеет равную высоту/ширину. Это одно достаточно просто и продемонстрировано ниже, но я хотел бы, чтобы элементы (DIV) переносились на другую строку, если они уменьшались ниже min-width, поэтому он не выглядит сжатым на мобильных дисплеях.

Я думаю, что jQuery может справиться с этим, но для простоты и размера я хотел бы увидеть, есть ли только решение css.

#wrapper { 
 
    display: table; 
 
    table-layout: fixed; 
 
    
 
    width:90%; 
 
    height:100px; 
 
    background-color:Gray; 
 
} 
 
#wrapper div { 
 
    display: table-cell; 
 
    height:100px; 
 
    min-width:200px; 
 
} 
 

 
#one { 
 
    background-color:green 
 
} 
 
#two { 
 
    background-color:blue 
 
} 
 
#three { 
 
    background-color:red 
 
}

<div id="wrapper"> 
 
    <div id="one">one one one one one one one one one one one one one one one one one one one one one</div> 
 
    <div id="two">two two two two two two</div> 
 
    <div id="three">three</div> 
 
</div>

Некоторые детали, как к реализации:

Это для типа целевой страницы значок сетки, количество элементов, присутствующих динамичны как размеры страницы. Вертикальная прокрутка из-за обертывания предметов в порядке, но я не хочу иметь горизонтальную прокрутку.

Answer 1

Вы можете сделать это с Flexbox и flex-wrap: wrap, вот Fiddle

#wrapper { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    width: 90%; 
 
    height: 100px; 
 
    background-color: Gray; 
 
} 
 
#wrapper div { 
 
    flex: 1; 
 
    height: 100px; 
 
    min-width: 200px; 
 
} 
 
#one { 
 
    background-color: green 
 
} 
 
#two { 
 
    background-color: blue 
 
} 
 
#three { 
 
    background-color: red 
 
}

<div id="wrapper"> 
 
    <div id="one">one one one one one one one one one one one one one one one one one one one one one</div> 
 
    <div id="two">two two two two two two</div> 
 
    <div id="three">three</div> 
 
</div>

Answer 2

От моего комментария

не использовать дисплей: свойства таблицы, ячейки на строка не обертывается, flex делает;)

#wrapper { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    width: 90%; 
 
    height: 100px; 
 
    background-color: Gray; 
 
} 
 
#wrapper div { 
 
    height: 100px; 
 
    min-width: 200px; 
 
    flex: 1; 
 
} 
 
#one { 
 
    background-color: green 
 
} 
 
#two { 
 
    background-color: blue 
 
} 
 
#three { 
 
    background-color: red 
 
}

<div id="wrapper"> 
 
    <div id="one">one one one one one one one one one one one one one one one one one one one one one</div> 
 
    <div id="two">two two two two two two</div> 
 
    <div id="three">three</div> 
 
</div>