JimJim2000 JimJim2000 - 3 months ago 11
CSS Question

Left fluid div, center stretch up to max-width div, right fluid div

I have the following situation:

<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>


I need, that three dives (left,center,right) be in one row. Left and right div must take all empty space which is left after center div (left 50% of empty space, right 50% of empty space). Center div must stretch to maximum but it must have max-width:1000px. So, for example if width of the screen is <1000 center div must take all space. So, center div possible widths are from 0 to 1000px. How to do it without js?

Answer

Use a flexbox with the center div able to shrink only from the flex-basis of 1000px.

This ensures that the center will stretch to a maximum of 1000px

snippet below:

.container {
  display: flex;
}
.container > div {
  height: 100px;
  border: 1px solid black;
}
.left,
.right {
  flex: 1;
}
.center{
  flex: 0 1 1000px;
}
<div class="container">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

Comments