CSS flex - have at least two items per row with minimal text truncation

Issue

I am working on a layout of items in CSS and I am trying to achieve the following:

• If there are enough items, then there should be at least two items or more per row. There could be more than two items to a row if they are narrow enough to fit on the same line.
• If the text in an item is too long to fit the remaining space, then the text should be truncated with an ellipsis and should not wrap to more than one line.
• The space should be utilized as efficiently as possible to try to fit as many items per row (thereby reducing the number of rows), while also minimizing the amount of truncation (and keeping at least two items or more on a row).

The main goals are to: have as many items per row as possible (at least two per row) while minimizing the amount of truncation that happens (so use as much space per row as necessary).

--

Given those requirements, I have been trying to use a flexbox for the layout, but I am having trouble getting there to be at least two items to a row (for that, I set the max-width to 50%, as shown below), while also allowing the items to fill the space if necessary, so as to avoid truncating the text.

The following example shows this.

In this example, there is extra space on the top row, after "Item Two...". That item should be, ideally, stretched to fill the space so the content is not as truncated as it is now.

On the second row, "Item Three..." could be stretched a bit more to reveal more of its text, while moving "Item Five" to the next row. "Item Four" has to stay on this row, however, due to the requirement of having at least two items per row.

But I am just trying to fit at least two items per row (or more if possible without truncating too much text), while displaying as much of each item as possible. I don't want a bunch of extra whitespace if that means some of the items are unnecessarily truncated.

Does anyone have any suggestions on what I could change or do here? I think one thing that I would need to get rid of is the max-width constraint, as that makes it so the items might be unnecessarily truncated. But if I remove that constraint, then the longer items will end up taking more of the line and could result in there only being one item per row, which is not good either.

.box {
  display: flex;
  flex-wrap:wrap;
}

.box > * {
  flex: 0 1 max-content;
  max-width:calc(50% - 4px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Just for visual styling purposes */
.box {
  border: 2px dotted rgb(96, 139, 168);
  width: 300px;
}

.box > * {
  border: 2px solid rgb(96, 139, 168);
  border-radius: 5px;
  background-color: rgba(96, 139, 168, 0.2);
}

<div class="box">
  <div>Item One</div>
  <div>Item Two two two two two two two two two two two two two two two</div>
  <div>Item Three has more content and so has a larger size</div>
  <div>Item Four</div>
  <div>Item Five</div>
  <div>Six</div>
  <div>Seven</div>
</div>

Solution

Would something like this work for you?

.box {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.box>* {
  flex: 1 1 150px;
  max-width: calc(50% - 4px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.box {
  border: 2px dotted rgb(96, 139, 168);
  padding: 4px;
  width: 100%;
}

.box>* {
  border: 2px solid rgb(96, 139, 168);
  border-radius: 5px;
  background-color: rgba(96, 139, 168, 0.2);
  padding: 4px;
}

<div class="box">
  <div>Item One</div>
  <div>Item Two two two two two two two two two two two two two two two</div>
  <div>Item Three has more content and so has a larger size</div>
  <div>Item Four</div>
  <div>Item Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
</div>

Answered By - Jacob