Flexbox: 3rd div width equal to 1st div width, 2nd div fills remaining space-CodePudding

I have three divs in a row. The width of the first (left) div scales depending on it's content (i.e. the length of a text string and the font size). I want the third (right) div to be equally wide as the first, and the second (middle) div to fill up the remaining width.

I got this to work with two divs. In the following example, the width of the first div scales depending on the width of its content, and the second div fills the remaining width of the parent:

#container{
  display:flex;
  flex-direction:row;
}
#first{
  background:red;
}
#second{
  background:blue;
  flex-grow:1;
}

<div id="container">
  <div id="first">
    alongtextstringthatdoesntwrap<br>
    shortstring
  </div>
  <div id="second">
    This div should take up the remaining with.
  </div>
</div>

With three divs, all I was able to do was measure the first div (using the developer tools of my browser) and setting the width of the third div to this value. But if the width of the first div changes, because the text string length or the font size varies, then the third is no longer equal to the first:

#container{
  display:flex;
  flex-direction:row;
}
#first{
  background:red;
}
#second{
  background:blue;
  flex-grow:1;
}
#third{
  background:green;
  width:200px;
}

<div id="container">
  <div id="first">
    alongtextstringthatdoesntwrap<br>
    shortstring
  </div>
  <div id="second">
    This div should take up the remaining with.
  </div>
  <div id="third">
    This div should be equally wide as the first div. There are just short words in this div, so the text wraps to (almost) any width.
  </div>
</div>

Is it possible, in flexbox, to set the two "framing" divs to equal width, with the width varying dynamically with the content of the divs, and the middle div to fill the remaining space dynamically?

I've seen a couple of similar questions on this site, but they were all asked before flexbox became widely compatible with browsers, and I hope that flexbox now offers a solution to this old problem.

CodePudding user response：

I don't think you can do this with flexbox (unless I'm wrong), but you can use "width: fit-content" on the first and third div:

Exemple: https://jsfiddle.net/75yufbdk/2/

#container{
  display:flex;
  flex-direction:row;
}

#first{
  width: fit-content;
  background:red;
}
#second{
  background:blue;
  flex-grow: 1;
}
#third{
  width: fit-content;
  background:green;
}

<div id="container">
  <div id="first">
    alongtextstringthatdoesntwrap<br>
    shortstring
  </div>
  <div id="second">
    This div should take up the remaining with.
  </div>
  <div id="third">
    alongtextstringthatdoesntwrap<br>
    shortstring
  </div>
</div>

CodePudding user response：

Use CSS grid and the 1fr unit

#container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  margin:10px 0;
}

#first {
  background: red;
}

#second {
  background: blue;
}

#third {
  background: green;
}

<div id="container">
  <div id="first">
    alongtextstringthatdoesntwrap<br> shortstring
  </div>
  <div id="second">
    This div should take up the remaining with.
  </div>
  <div id="third">
    This div should be equally wide as the first div. There are just short words in this div, so the text wraps to (almost) any width.
  </div>
</div>

<div id="container">
  <div id="first">
    alongtextstringthatdoesntwrap<br> shortstring
  </div>
  <div id="second">
    This div should take up the remaining with.
  </div>
  <div id="third">
    This div should be equally wide as the first div.
  </div>
</div>

<div id="container">
  <div id="first">
    alongtextstringthatdoesntwrap<br> shortstring
  </div>
  <div id="second">
    This div should take up the remaining with.
  </div>
  <div id="third">
    This 
  </div>
</div>