'Remove extra horizontal width from overflow wrapping with flex

Essentially, I am trying to remove/prevent the extra horizontal width created when a horizontal row of block elements has any of the block elements wrapped. That is, I want the width of the div containing the overflow elements to be just the size of the nonwrapped elements.

The following code can be used to see the issue in question:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="example.css">
</head>
<body>
  <div class="card">
    <div class="card-content">
      <div>
        <div class="row">
          <p class="note-title">This is a relatively lengthy example title for example purposes.</p>
          <div>
            <div class="row">
              <div class="note-tags-list">
                <p id="blank-tag">.</p>
                <p class="tag note-tag">crunchy</p>
                <p class="tag note-tag">recipe</p>
                <p class="tag note-tag">carrot</p>
              </div>
              <p id="text-that-should-stay">I stay</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

/* example.css */
@import "https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css";

#text-that-should-stay {
  white-space: nowrap;
  color: white;
}

#blank-tag {
  width: 30px;
  min-width: 30px;
}

.note-title {
    white-space: nowrap;
    color: white;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card {
    background-color: black;
}

.row {
    display: flex;
    justify-content: space-between;
}

.note-tag {
  width: 175px;
  min-width: 0px;
}

.note-tags-list {
    display: flex;
    flex-flow: row wrap;
    overflow: hidden;
    height: 24px;
    justify-content: flex-end;
}

For ease, the code above can be seen in the following JSFiddle, though running the above code locally will produce the same result: https://jsfiddle.net/5L7u2gkp/1/.

Here is a gif that shows the issue and then what would be ideal visually:

Issue gif

cssflexboxoverflowwidth


Solution 1:[1]

SECOND EDIT

I might not get you right, but there is no extra width when you remove the blank tag.

no extra width

If you are talking about the gap between node-title and note-tags-list, it derives from flex-grow: 0;, which is the default for flex items. You can add to .tag the flex-grow property as flex-grow: 1; and it will make your tags grow to the maximum space they can get.

@import "https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css";

#text-that-should-stay {
  white-space: nowrap;
  color: white;
}

.note-title {
    white-space: nowrap;
    color: white;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card {
    background-color: black;
}

.row {
    display: flex;
    justify-content: space-between;
}

.note-tag {
  width: 175px;
  min-width: 0px;
  flex-grow: 1;
}

.note-tags-list {
    display: flex;
    flex-flow: row wrap;
    white-space: nowrap;
    overflow: hidden;
    height: 24px;
    justify-content: flex-end;
}
<div class="card">
  <div class="card-content">
    <div>
      <div class="row">
        <p class="note-title">This is a relatively lengthy example title for example purposes.</p>
        <div>
          <div class="row">
            <div class="note-tags-list">
              <p class="tag note-tag">crunchy</p>
              <p class="tag note-tag">recipe</p>
              <p class="tag note-tag">carrot</p>
            </div>
            <p id="text-that-should-stay">I stay</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

EDIT - based on your comments

so actually, the excess width is coming from the `#blank-tag`. You set its width to `30px`. If you remove it / change its width to 0, it will solve your problem. Otherwise, there will always be a 30px gap.

the

"pink" width

It is not related to the width of your elements; it's how chrome devtools represent the position of your elements when you use flexbox. You can (and should!) read more here. You can check it yourself by changing the width of the div in the devtools to 202px (as seen in the picture you added), and you'll see there will be no change in the display.

Solution 2:[2]

Its because of flex-flow: row wrap;

To clarify, The flex-flow wrap's the content inside .note-tags-list,When the space is not enough to display items inside it(crunchy|recipe|carrot),Vertically,The items that are placed vertically are not visible,as there is fixed height to one of its parent.

enter image description here

The answer is to remove flex-flow: row wrap;
See This fiddle-fork

Solution 3:[3]

what do you think about this answer? i only slightly changed the HTML codes. i change the min-width of .note-tag and set a flex-grow for it.
and now ...

I want the width of the div containing the overflow elements to be just the size of the nonwrapped elements.

is working

@import "https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css";

#text-that-should-stay {
  white-space: nowrap;
  color: white;
}

.note-title {
    white-space: nowrap;
    color: white;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px dashed blue;
}

.card {
    background-color: black;
}

.row {
    display: flex;
    justify-content: space-between;
}

.tags-list{
  display: flex;
  justify-content: flex-end;
  border: 2px dashed green;
}
.note-tag {
  min-width: 175px;
  flex-grow: 1;
}

.note-tags-list {
    display: flex;
    flex-flow: row wrap;
    gap: 5px;
    overflow: hidden;
    height: 24px;
    justify-content: flex-end;
    border: 1px dashed red;
}
<div class="card">
  <div class="card-content">
    <div>
      <div class="row">
        <p class="note-title">This is a relatively lengthy example title for example purposes.</p>
          <div class="tags-list">
            <div class="note-tags-list">
              <p class="tag note-tag">crunchy</p>
              <p class="tag note-tag">recipe</p>
              <p class="tag note-tag">carrot</p>
            </div>
            <p id="text-that-should-stay">I stay</p>
          </div>
      </div>
    </div>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Neptotech -vishnu
Solution 3 Ahmad MRF

Related Questions