Is it possible to shrinkwrap flex items with wrapping text inside them? - html

Question

I have an unassuming nav menu:
<div>
<ul>
<li><span>Real Estate & Development</span></li>
<li><span>New & Expanding Business</span></li>
{ … }
</ul>
</div>
This menu needs the following visual properties:
Items distributed horizontally within their container by putting equal space between them
Text in items can wrap to make items take up less horizontal space
All text is vertically centered.
I can't get all three of these at the same time.
This SCSS:
div > ul {
display: flex;
justify-content: space-between;
> li {
display: table;
table-layout: fixed;
word-wrap: break-word;
> a {
display: table-cell;
text-align: center;
vertical-align: middle;
}
}
}
…gets me great spacing with vertical centering, but the text doesn't wrap, so the items overflow the container:
If I delete the display: table stuff:
div > ul {
display: flex;
justify-content: space-between;
> li {
// DELETED display: table;
// DELETED table-layout: fixed;
word-wrap: break-word;
> a {
display: table-cell;
text-align: center;
vertical-align: middle;
}
}
}
…then I get good text wrapping, but the spacing between the items is all off:
I've tried lots of other combinations of CSS properties, but nothing has gotten me any closer than these two. Here's a pen with my code. Is there any incantation that will get me all the things I want from this menu?
EDIT: My Pen now includes a third attempt that uses another Flex container instead of display: table-cell. The spacing is better, but still not great. I guess this may just come down to the text-wrapping width issue described in this answer, and I may just have to hard code some line breaks or use JavaScript.
EDIT 2: The thing about that, though, is that the items aren't maxing out at a set size. On my third attempt there, the ones that wrap and end up bigger than the width of the wrapped text do not end up the same size as each other. And in fact the space-between isn't doing much of anything, because the top-level flex items are filling the entire space; the space-between them is 0px.

Answer 1

Use flex instead of table-cell on the a elements, and then put width: min-content on the spans inside them:
div > ul {
display: flex;
justify-content: space-between;
> li > a {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
span {
width: min-content;
}
}
}
You might get more text wrapping than you bargained for this way, but you can control that with non-breaking spaces.

Answer 2

Text should already wrap automatically inside flex items. It is working for me with the following code:
SCSS:
ul {
padding: 0;
list-style: none;
display: flex;
background-color: grey;
height: 50px;
align-items: center;
justify-content: space-between;
li {
text-align: center;
flex: 1;
}
}
HTML:
<div>
<ul>
<li><span>Real Estate & Development</span></li>
<li><span>New & Expanding Business</span></li>
<li><span>New & Expanding Business</span></li>
</ul>
</div>
Fiddle
You can adjust spacing between items with justify-content:
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
cssTricks page for Flexbox
You can make items take equal width by setting flex-basis: 0; flex-grow: 1; on the li elements.