I have two flexbox items next to each other. The left item contains text and must never wrap. The right item contains svgs and I want these svgs to resize as per the available space. I can't get it working.
This is what I have but as you can see the text wraps:
I've started a CodePen with different (but similar) markup. In there I would assuming flex: 1 1 auto;
means that that flex item has 'priority' and won't wrap. But because it's not working I suspect I have a fundamental misunderstanding of flexbox. (and maybe svgs are making it extra complicated as svgs are documents, not images)
As a bonus question. I want left & right flexboxes to be pushed part (justify-content: space-between
) and in case the container width is really big, apply a max-height
or max-width
on the svgs.
Thank you!
CodePudding user response:
There's nothing in your nowrap
class instructing the text not to wrap.
It's just this:
.nowrap {
flex: 1 1 auto;
margin-right: 15px;
}
Add this:
.nowrap {
flex: 1 1 auto;
margin-right: 15px;
white-space: nowrap;
align-self: center; /* optional */
}