Flexbox forced on to single line align icon to wrapped text width

Question

I'm running into an issue with text wrapping inside of flexbox. I want the flex item to always be the width of the wrapped text, so an icon next to the item will stick next to the text. Instead, the text wrapping causes a gap between the text and the icon.

This is an example of the problem:

.flex-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.flex-item {
  display: flex;
  flex-grow: 0;
}
.flex-item__description {
  background: yellow;
}
.flex-item__icon {
  background: orange;
}

<p>Works Ok at full width:</p>

<div class="flex-container">
  <div class="flex-item">
    <span class="flex-item__description">Affordable long-term quintessential media</span>
    <span class="flex-item__icon"></span>
  </div>
  <div class="flex-item">
    <span class="flex-item__description">Other</span>
    <span class="flex-item__icon"></span>
  </div>
</div>

<p>But once the container gets small enough so the text starts wrapping, the icon is no longer aligned next to the text. There's a bunch of empty yellow space.</p>

<div class="flex-container" style="max-width: 290px">
  <div class="flex-item">
    <span class="flex-item__description">Affordable long-term quintessential media</span>
    <span class="flex-item__icon"></span>
  </div>
  <div class="flex-item">
    <span class="flex-item__description">Other</span>
    <span class="flex-item__icon"></span>
  </div>
</div>

This is what I want it to look like when it's necessary for the text to wrap due to the container's width being reduced. In this case, the item should fit the text width.

Otherwise, when there's enough room for all of the text to be on one line, it should display on one line.

Does anyone have an idea how to solve this problem? Flexbox or not? I'm looking for a generalized responsive solution that works on all screen sizes, that does not use Javascript. The icon should always fit to the right of the text inside the item it's assocated with, without wrapping to a new line.

@Paulie D: you closed the question. The reference you provided does not answer the OP's concerns. — fnostro, Apr 12 '22 at 19:58
The duplicate DOES answer the question in that this is not possible with CSS. — Paulie_D, Apr 13 '22 at 05:29
If the answer is "you must use Javascript" that's fine, I was just hoping that wasn't the case. — user2867288, Apr 13 '22 at 14:30
I would just use a ::after element and add `content: ''` to it. — Rickard Elimää, Apr 28 '22 at 16:53
This was really a question about a specific flex-box quirk, the specific example was to show that problem. — user2867288, Apr 28 '22 at 18:08
The `.flex-item` shouldn't be `display: flex`, but instead (just) have `flex: 1 1 auto", and possibly a max-width, depending on what you want to achieve. — Rickard Elimää, Apr 29 '22 at 07:00

fnostro · Answer 1 · 2022-04-12T19:35:20.773

Made a change to .flex-item

.flex-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.flex-item {
  display: flex;
  /* flex-grow: 0; */
  flex: 0 0 0;
}

.flex-item__description {
  background: yellow;
}

.flex-item__icon {
  background: orange;
}

.style-issue {
  min-width: 180px;
}

<p>Works Ok at full width:</p>

<div class="flex-container">
  <div class="flex-item">
    <span class="flex-item__description">Affordable long-term quintessential media</span>
    <span class="flex-item__icon"></span>
  </div>
  <div class="flex-item">
    <span class="flex-item__description">Other</span>
    <span class="flex-item__icon"></span>
  </div>
</div>

<p>But once the container gets small enough so the text starts wrapping...</p>

<div class="flex-container" style="max-width: 290px">
  <div class="flex-item style-issue">
    <span class="flex-item__description">Affordable long-term quintessential media</span>
    <span class="flex-item__icon"></span>
  </div>
  <div class="flex-item">
    <span class="flex-item__description">Other</span>
    <span class="flex-item__icon"></span>
  </div>
</div>

The only problem with this is it's forcing the text to wrap as much as it possibly can, I don't want it to wrap until it's necessary to wrap. Basically, the top example "Works OK at full width" should not change. I edited the question to clarify. — user2867288, Apr 12 '22 at 19:10

Flexbox forced on to single line align icon to wrapped text width

1 Answers1