Как задать три колонки с динамической колонкой в центре?

Question

[Максим Иванов]

Есть 3 колонки, левая и права должны быть фиксированной ширины
В центре автоматический контент, но при этом в центральной колонке может показываться горизонтальный скролл, ибо могут добавлять в нее всякие элементы, увеличивающие эту ширину


Как на css можно такое сделать?

Для левой и правой я попытался задать:

.mdl-panel-draw  {
  position: absolute;
  outline: 1px solid red
}

.mdl-left-panel,
.mdl-right-panel {
  width: 300px;
  height: 100%;
  top: 0;
  
} 

.mdl-left-panel {
  left: 0;
}
.mdl-right-panel {
  right: 0
}

Но как определить центральную, в голову не лезет?

Answer 1

[DSoly]

Вариант через Flex'ы. Их больше браузеров поддерживает чем calc.

<div class="wrap">
  <div class="mdl-panel"></div>
  <div class="mdl-center-panel">Start Content</div>
  <div class="mdl-panel"></div>
</div>

.wrap {
  display: flex;
  justify-content: space-between;
}
.mdl-panel {
  width: 300px;
  height: 100px;
  background:green;
} 
.mdl-center-panel {
  width: 100%;
  height: 100px;
  background: red;
}