Как сделать резиновый список в резиновом DiV?

Question

[Calabozo]

Всем привет..Прошу вашей помощи. Не опытен в програмировании.
Есть задача, сделать резиновые колонки с непостоянным количеством (от 1 до 4 ) и резиновым списком от левого края до правого колонки. Также список может состоять из одной или двух колонок по выбору, в чем и заключается сложность, когда список делаю из двух колонок вся оснавная колонка растягивается и сжимаются соседние.

Макет:


если пригодится, пример моих мучений

<div class="col1">
	<div class="header">Заголовк списка
		<ul class="list_col">
			<li class="on">Спискок</li>
			<li class="on">Спискок</li>
			<li class="on">Спискок</li>
			<li class="on">Спискок</li>
			<li class="on">Спискок</li>
		</ul><
	</div>
</div>

<div class="col">
	<div class="header"Ззаголовк списка
		<ul class="list_col2">
		    <li class="on">Спискок</li>
	   </ul>
	</div>
</div>

.flex {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap ;
   justify-content: center ;
   align-items: flex-start;
}



.col {
 flex-grow:1;
 border: 1px solid black;
 color: white;

}
.col:empty {
  display: none;
}

.header {
  font-size: calc(1rem + 0.80vw);
   background: #212124;
   border: 6px solid black;
   padding: 0;
   color: black;
   white-space: nowrap;
}

.header ul li {
  border: 1px solid black;
  font-size: calc(1rem + 1.23vw);



}

.on {
  background: green;
}

Comments

[Exploding]

Сдается мне вы тупо завтыкали классы поменять/применить. В HTML есть list_col и list_col2, которых нет в css, и в css .flex который не используется в html нигде.
P.S. Вопрос ниасилил если что

[eternal_blue]

Насколько я помню, flex элементы внутри другого flex элемента работают превосходно. В чем проблема?

[Calabozo]

Пробовал
flex-direction column / row
Но не получалось colomn - попросту выводил все объекты в одну колонку. Как вывести в две не сообразил.
Row растягивал весь объект как бы я не старался и приеэтом объекты разной велеченыпо содержимому

Answer 1

[Programiker]

Вы про ксс медиа вообще ничего не знаете?
На крайний случай ботсапом воспользуйтесь.

</ul><

читать
По вопросам на почту: [e-mail]