How to inline+wrap elements and their children in a flex container? - html

Question

I need to display some elements inline so they wrap when they fill the viewport width. I'd prefer to use flex with - easy and maintainable, gap clearly defined - instead of inline or floats - you need to use margins for the gap, then avoid ugly wraps using negative margin...
Problem is I am not being able to do it when the items to align are nested on different parents. Example of the tags I'd like to align:
div wrapper:
ul list of some related items
li item
li item
span item not in list
span item not in list
I am attaching a demo, where the structgure is repeated 3 times, each time offering less width to showcase how the items wrap. The ul behaves perfectly as an inline element, until it has to wrap, then it behaves as a block element.
div {
border: 1px solid blue; /* for easier debugging */
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 40px; /* just visual separation between the 3 examples */
}
div:nth-of-type(2) {
max-width: 450px; /* stretcher just to show how items wrap */
}
div:nth-of-type(3) {
max-width: 250px; /* stretcher just to show how items wrap */
}
ul {
border: 1px solid green; /* for easier debugging */
display: inline-flex;
flex-wrap: wrap;
gap: 20px;
}
li, span {
border: 1px solid red; /* for easier debugging */
display: inline;
}
<div>
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
<span>Action 1</span>
<span>Action 2</span>
<span>Action 3</span>
</div>
<!-- structure repeats 3 times -->
<p>This wraps okay</p>
<div>
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
<span>Action 1</span>
<span>Action 2</span>
<span>Action 3</span>
</div>
<p>The UL pushed next inline elements to a new line :(</p>
<div>
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
<span>Action 1</span>
<span>Action 2</span>
<span>Action 3</span>
</div>

Answer 1

Use the display: contents property on the ul element, which allows the child elements to be treated as if they were direct children of the parent container.
ul {
display: contents;
}
Can also use display: inline-block on the li and span elements instead of display: inline which allow them to have their own layout. Also you can use white-space: nowrap on the ul to prevent it from breaking to a new line.
li, span {
display: inline-block;
}
ul {
white-space: nowrap;
}

Answer 2

* {
/* just for reset and for remove all margins and paddings */
box-sizing: border-box;
margin: 0;
padding: 0;
}
div {
border: 1px solid blue;
/* for easier debugging */
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 40px;
/* just visual separation between the 3 examples */
}
div:nth-of-type(2) {
max-width: 450px;
/* stretcher just to show how items wrap */
}
div:nth-of-type(3) {
/* max-width: 250px; */
max-width: fit-content;
/* is like 488px, but is resizable*/
/* you wrong, the ul by default doesn't
push to next line any elements,
you have did a static width
of maximum 250px...*/
/* stretcher just to show how items wrap */
}
ul {
border: 1px solid green;
/* for easier debugging */
display: inline-flex;
flex-wrap: wrap;
gap: 20px;
}
li, span {
border: 1px solid red;
/* for easier debugging */
display: inline;
}
<div>
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
<span>Action 1</span>
<span>Action 2</span>
<span>Action 3</span>
</div>
<!-- structure repeats 3 times -->
<p>This wraps okay</p>
<div>
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
<span>Action 1</span>
<span>Action 2</span>
<span>Action 3</span>
</div>
<p>The UL pushed next inline elements to a new line :(</p>
<div>
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
<span>Action 1</span>
<span>Action 2</span>
<span>Action 3</span>
</div>
You have did a "static" width on 2nd child of max(250px) and then, they can't wrap anymore beacuse they were already wrapped.