Flex grow should take available space ONLY & prevent from pushing out children with long text

Question

I have a flex container with children each child has some content (without fixed width's), & on one child I use flex-grow: 1; to fill it to the remaining space available.

Some times the child that is growing contains a long word (for example some JSON without spaces), & it pushes out all other children out of view.

I want the growing child to have last priority. It should ONLY fill width until the point where it is forced to push out other children of the view. & should break the long word with ellipsis (...)

.parent {
  width:700px;
  border:1px solid #000;
  height:23px;
  font-family: "Roboto Mono", monospace;
  display:flex;
  margin:20px 5px;
  overflow:hidden;
}
.parent > div {
  padding: 2px 4px;
  overflow: hidden;
  color:red;
  min-width:fit-content;
  border-right:2px solid blue;
}
.grow {
  flex-grow:1;
  color:blue;
  background-color:yellow;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<h3>Without long text</h3>
<div class="parent">
    <div>stuff</div>
    <div class="grow">SomeLongTextHere</div>
    <div>stuff</div>
    <div>stuff</div>
    <div>stuff</div>
    <div>stuff</div>
</div>

<h3>With long text</h3>
<div class="parent">
    <div>stuff</div>
    <div class="grow">gdfhdfikghdkufgldfugildufgiludlfigudilfgujdilufgldiufgluidlfigudlfiugdilfugdlifugdlfi</div>
    <div>stuff</div>
    <div>stuff</div>
    <div>stuff</div>
    <div>stuff</div>
</div>

Here is a codepen: https://codepen.io/amgalitzky/pen/wvdNvVv

Answer 1

Remove min-width: fit-content. That's preventing the .grow element from shrinking.

Then, disable flex-shrink on all items, except the .grow element.

Make these adjustments to your code:

.parent > div {
  padding: 2px 4px;
  overflow: hidden;
  color: red; 
  /* min-width:fit-content; */ /* adjustment */
  border-right: 2px solid blue;
}

/* new */
.parent > div:not(:nth-child(2)) {
  flex-shrink: 0;
}

.parent {
  width: 700px;
  border: 1px solid #000;
  height: 23px;
  font-family: "Roboto Mono", monospace;
  display: flex;
  margin: 20px 5px;
  overflow: hidden;
}

.parent > div {
  padding: 2px 4px;
  overflow: hidden;
  color: red; 
  /* min-width:fit-content; */ /* ADJUSTMENT */
  border-right: 2px solid blue;
}

.parent > div:not(:nth-child(2)) {
  flex-shrink: 0;  /* NEW */
}

.grow {
  flex-grow: 1;
  color: blue;
  background-color: yellow;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<h3>Without long text</h3>
<div class="parent">
  <div>stuff</div>
  <div class="grow">SomeLongTextHere</div>
  <div>stuff</div>
  <div>stuff</div>
  <div>stuff</div>
  <div>stuff</div>
</div>

<h3>With long text</h3>
<div class="parent">
  <div>stuff</div>
  <div class="grow">gdfhdfikghdkufgldfugildufgiludlfigudilfgujdilufgldiufgluidlfigudlfiugdilfugdlifugdlfi</div>
  <div>stuff</div>
  <div>stuff</div>
  <div>stuff</div>
  <div>stuff</div>
</div>

For a complete understanding of what's going on here, see this post:

• Why don't flex items shrink past content size?