Home > Mobile >  Prevent wrapping in flex items
Prevent wrapping in flex items

Time:10-05

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:

enter image description here

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 */
}
  • Related