I need to create a layout with three divs in a row. The first div should have a fixed width, the second div should expand until it reaches a "max-width", and the third div should take up the remaining space. Everything works fine until the text inside the third div fills up the entire width. Instead of wrapping, the text causes the second div to shrink.
<div id="container">
<div id="one">
sdfsdf
</div>
<div id="two">
fghfgh fghfghd sdf sdf sdf ssdf sdf gh
</div>
<div id="three">
sdfsdfsdfsdfsfd sdf sdf sdf sdf sdfwef sdfwefs df
</div>
</div>
#container{
background-color: red;
display: flex;
height: 100px;
width: 400px;
}
#one{
background-color: blue;
flex-grow: 1;
width:60px;
}
#two{
background-color: red;
max-width: 100px
}
#three{
background-color: green;
flex-grow: 1;
}
For more information and a demonstration, you can visit the jsfiddle here.