CODEWITHSUNDEEP
cssflexbox
Ben Rich
Ben Rich

Reputation: 35

Prevent wrapping in flex items

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

.container {
  width: 300px;
  margin: 0 auto;
  border: 2px blue solid;
  
  display: flex;
  flex-wrap: nowrap; /* has no effect */
  justify-content: space-between;
}

.nowrap {
  flex: 1 1 auto;
  margin-right: 15px;
}

.images {
/*   flex: 0 0 auto; unsure of this */
  display: flex;
  max-height: 80px;
}

img {
  min-width: 0;
  height: auto;
  width: 100%;
}
<div class="container">
  <span class="nowrap">Never wrap</span>
  <div class="images">
    <img src="https://assets.codepen.io/3/kiwi.svg" />
    <img src="https://assets.codepen.io/3/kiwi.svg" />
    <img src="https://assets.codepen.io/3/kiwi.svg" />
    <img src="https://assets.codepen.io/3/kiwi.svg" />
  <div>
</div>

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!

Upvotes: 1

Views: 1070

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371003

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

Upvotes: 3

Related Questions