Как создать пять строк с переменной фиксированной/переменной шириной?

Question

Пример:

<div class="container"> 
    <div>variable</div> 
    <div>fixed</div> 
    <div>variable with min-width</div> 
    <div>fixed</div> 
    <div>variable</div> 
</div> 

Я хочу, чтобы все это быть так велик, как в окне просмотра.

Я знаю, как это сделать для трех столбцов, но я полностью потерял версию с пятью столбцами. У меня даже нет понятия о том, как это может работать. Обычный стиль трех столбцов включает в себя абсолютное позиционирование фиксированных столбцов, но это не сработает, поскольку самые внешние столбцы имеют переменную ширину. Я потерян.

Любые идеи?

Это то, что я пробовал:

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; 
} 

"inner_container" в основном обычное решение три колонки. Если я установил inner_container на «left: 15%», весь внутренний контейнер перемещается вправо, но все же на собственной «линии».

Answer 1

flexbox это можно сделать.

* { 
 
    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