To create columns for the ul, I used flex-direction: column and flex-wrap: wrap.
When the elements within the ul are split into multiple columns, each column takes on the width of the widest content in that column. However, if there is only one column, it spans 100% of the width.
I am trying to make sure that a single-column layout adjusts its size based on its content.
/* boilerplate */
* {
margin: 0;
padding: 0;
}
div {
max-height: 100px;
background-color: #cacaca;
}
ul {
list-style-type: none;
height: 100px;
background-color: #dadada;
}
li {
margin-right: 10px;
background-color: #eaeaea;
}
/* actual code */
div {}
ul {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: center;
}
li {}<div>
<ul>
<li>normal</li>
<li>x</li>
<li>y</li>
<li>z</li>
<li>short</li>
<li>a</li>
<li>b</li>
<li>c</li>
<li>wiiiiiiiiiiiiiiide</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>normal</li>
<li>just two</li>
</ul>
</div>
<div>
<ul>
<li>why</li>
<li>full</li>
<li>width?</li>
</ul>
</div>