How to style five rows with alternating fixed/variable width? - html

Question

Example:
<div class="container">
<div>variable</div>
<div>fixed</div>
<div>variable with min-width</div>
<div>fixed</div>
<div>variable</div>
</div>
I want the whole thing to be as wide as the viewport.
I know how to do that for three columns, but I am completely lost with the five column version. I do not even have a concept of how that could work. The usual three column style involves absolute positioning of the fixed columns, but that would not work since the outermost columns are of variable width. I am lost.
Any ideas?
This is what I tried:
HTML:
<div class="container">
<div class="left">var</div>
<div class="inner_container">
<div class="inner_left">fix</div>
<div class="middle">var</div>
<div class="inner_right">fix</div>
</div>
<div class="right">var</div>
</div>
CSS:
.container {
position:relative;
}
.container div {
background: yellow;
}
.container .left,
.container .right {
background: orange;
width: 15%;
}
.inner_container {
position:relative;
}
.inner_container div {
margin:0 50px;
background:lightgreen;
}
.inner_container .inner_left,
.inner_container .inner_right {
background:lightblue;
position:absolute;
top:0;
width:50px;
}
.inner_container .inner_left {
left:-50px;
}
.inner_container .inner_right {
right:-50px;
}
The "inner_container" is basically the usual three column solution. If I set the inner_container to "left: 15%" the whole inner container is moved to the right, but still on its own "line".

Answer 1

flexbox can do that.
* {
box-sizing: border-box;
}
.container div {
height: 75px;
border:1px solid grey;
}
.container {
display: flex;
}
.variable {
background: lightgreen;
flex: 1 0 auto
}
.fixed {
background: lightblue;
flex: 0 0 150px;
}
.min-width {
flex-basis:250px;
min-width:250px;
background: pink;
}
<div class="container">
<div class="variable">variable</div>
<div class="fixed">fixed</div>
<div class="variable min-width">variable with min-width</div>
<div class="fixed">fixed</div>
<div class="variable">variable</div>
</div>
Codepen Demo