CSS - How to prevent the last item width in a flexbox from growing more than available space?

Question

In a flexbox I have 2 elements in a row which is not wrapped. The first one has a determined width. I want the second element to take the available space so I use this:

flex: 1 1 100%;

So far no problem. But in pages that the second element has extra stuff inside it, the element's width grow up to it parent's width (since I used max-width: 100% on it) which then goes out of flex container. If I use wrap then the element goes to the next line, but I don't want to wrap them.

So here's my problem: How can I set an element's width inside a flexbox to be exactly equal to available space? Not more, not less.

Answer 1

Give flex: auto; to the flexible item, which translates into:

 flex-grow: 1;
 flex-shrink: 1;
 flex-basis: auto;

and flex:none; to the inflexible one (combined with the desired width in length units or percentage). flex:none translates to:

 flex-grow: 0;
 flex-shrink: 0;
 flex-basis: auto;

See it working:

.flex {
  display: flex;
}
.flexible {
  flex: auto;
  border: 1px solid blue;
}

.inflexible {
  flex: none;
  width: 200px;
  border: 1px solid red;
}

<div class="flex">
  <div class="flexible">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit ut tortor pretium viverra suspendisse. Mi tempus imperdiet nulla malesuada. Habitasse platea dictumst quisque sagittis purus sit. At urna condimentum mattis pellentesque id nibh tortor id aliquet. Neque aliquam vestibulum morbi blandit cursus risus at ultrices. Pretium quam vulputate dignissim suspendisse in est. Libero nunc consequat interdum varius. Lectus mauris ultrices eros in cursus turpis massa tincidunt. Nisl tincidunt eget nullam non. Turpis massa sed elementum tempus egestas sed sed risus pretium. Ut ornare lectus sit amet est placerat. Bibendum ut tristique et egestas quis ipsum. Augue ut lectus arcu bibendum at. Amet consectetur adipiscing elit duis. Aliquam vestibulum morbi blandit cursus risus at ultrices mi tempus. Nisl purus in mollis nunc sed id semper risus. Ornare aenean euismod elementum nisi quis.
  </div>
  <div class="inflexible"></div>
</div>
<div class="flex">
  <div class="flexible">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit ut tortor pretium viverra suspendisse. Mi tempus imperdiet nulla malesuada. Habitasse platea dictumst quisque sagittis purus sit. At urna condimentum mattis pellentesque id nibh tortor id aliquet. Neque aliquam vestibulum morbi blandit cursus risus at ultrices. Pretium quam vulputate dignissim suspendisse in est. Libero nunc consequat interdum varius. Lectus mauris ultrices eros in cursus turpis massa tincidunt. Nisl tincidunt eget nullam non. Turpis massa sed elementum tempus egestas sed sed risus pretium. Ut ornare lectus sit amet est placerat. Bibendum ut tristique et egestas quis ipsum. Augue ut lectus arcu bibendum at. Amet consectetur adipiscing elit duis. Aliquam vestibulum morbi blandit cursus risus at ultrices mi tempus. Nisl purus in mollis nunc sed id semper risus. Ornare aenean euismod elementum nisi quis.
  </div>
</div>
<div class="flex">
  <div class="flexible"></div>
  <div class="inflexible"><p>Arcu dictum varius duis at consectetur lorem donec massa sapien. Blandit turpis cursus in hac habitasse platea. Malesuada pellentesque elit eget gravida cum sociis. Massa id neque aliquam vestibulum morbi blandit. Aenean pharetra magna ac placerat vestibulum lectus mauris ultrices eros. Ac turpis egestas sed tempus urna et. Sed risus ultricies tristique nulla. Velit aliquet sagittis id consectetur. Sit amet luctus venenatis lectus magna. In dictum non consectetur a erat nam at lectus. Risus nullam eget felis eget. Quis lectus nulla at volutpat diam. Ultricies tristique nulla aliquet enim tortor at auctor urna nunc. Ultricies leo integer malesuada nunc vel risus. Vitae auctor eu augue ut lectus arcu. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Pharetra sit amet aliquam id.

<p>Porta non pulvinar neque laoreet suspendisse interdum. Natoque penatibus et magnis dis parturient montes nascetur ridiculus. Ultrices in iaculis nunc sed augue lacus viverra. At imperdiet dui accumsan sit amet. Urna condimentum mattis pellentesque id nibh. Enim diam vulputate ut pharetra sit amet. Vel pharetra vel turpis nunc. Et ligula ullamcorper malesuada proin libero. Proin libero nunc consequat interdum varius sit. Nisi porta lorem mollis aliquam. Volutpat odio facilisis mauris sit amet massa. Arcu odio ut sem nulla pharetra diam. Gravida arcu ac tortor dignissim convallis aenean. Tellus cras adipiscing enim eu turpis. Risus pretium quam vulputate dignissim.</div>
</div>

Documentation here.

Observation: if you do not specify a width for the inflexible item, it will take space according to its contents and the remaining space will be disputed (or filled) by the flexible item(s). In such cases you might want to give the flexible item a min-width, to make sure it doesn't get squashed by its sibling.

Answer 2

If you wrap the two elements with a parent element wrapper that has display flex you can set the width of the two inner elements by flex property.

Using flex: 0 0 200px on the first element sets the width to 200px and flex: 1 1 auto the second element fills the remaining space.

Code in action

.parent-element{
  display: flex;
}

.first-element{
  flex: 0 0 200px; 
  border: 1px solid red
}

.second-element{
  display:flex; 
  flex: 1 1 auto;
  border: 1px solid blue
}

.second-element-content{
  flex: 1 1 auto; 
  border: 1px solid black
}

    <div class="parent-element">
    	<div class="first-element">first element</div>
    	<div class="second-element">
    		<div class="second-element-content">content in second column should now fit fine.. 
        	content in second column should now fit fine.. 
        	content in second column should now fit fine.. 
    		  content in second column should now fit fine.. 
        	content in second column should now fit fine..
        	content in second column should now fit fine..
        	content in second column should now fit fine..
            </div>
    	</div>
    <div>

Answer 3

Try setting the second child to grow and shrink, and the first child to only shrink (if you want it to).

change .box--fixed to : flex: 0 1 300px if you want it to shrink when it can. You can also use values < 1 to make it shrink less.

Ultimately, if the content in the purple div cannot shrink anymore, it will overflow, so just account for that by, a) making it wrap OR b) shrinking the first div

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

.box {
    flex: 1 1 auto;
    min-height: 200px;
    background-color: rebeccapurple;
}

.box--fixed {
    flex: 0 0 300px;
    // flex: 0 1 300px;
    background-color: #bada55;
}

<div class="wrap">
    <div class="box box--fixed"></div>
    <div class="box">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, dolores animi ab perspiciatis tenetur quis alias illum soluta provident deserunt similique tempore minima consectetur, eaque exercitationem quas nihil nisi voluptates.
    </div>
</div>

Answer 4

The best solution I found so far was max-width: calc(100% - fixed_width_of_first_element px);

More info on calc.