Увеличьте ширину гибкого элемента div с переносом столбца, чтобы соответствовать содержимому

Question

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

Вот пример:

ul {
  list-style: none;
  padding: 1rem 1rem 1rem 0;
  background-color: lightblue;
  max-height: 300px;
  display: inline-flex;
  flex-flow: column wrap;
  align-items: flex-start;
  width: 238px;
}

ul li {
  width: 100px;
  border: 1px solid red;
  margin-left: 1rem;
}

/* HTML */
<ul>
   <li>item</li> // repeated n times
</ul>

https://codepen.io/mt_dt/pen/GRJYaNj?editors=1100

Это должно быть что-то вроде этого: https://ibb.co/6wmYkGX

Answer 1

Если вы хотите, чтобы каждый элемент в списке был шире, чем элемент ul, вам нужно удалить жестко заданные свойства height и flex (они бесполезны) из элемента ul и установить ширину: 100%; на листе:

ul {
  list-style: none;
  padding: 1rem 1rem 1rem 0;
  background-color: lightblue;
  width: 235px;
}

ul li {
  width: 100%;
  border: 1px solid red;
  margin-left: 1rem;
}

Посмотрите на этот код . Надеюсь, это поможет!