Трехколонный HTML-флекс: как установить средний, чтобы получить все оставшееся пространство?

Скажем, у меня есть простой трехколоночный макет, созданный с помощью display: flex; (demo). В левом и правом столбцах у меня есть изображения с указанной шириной (100px каждый). В центральной колонке у меня есть основная область содержимого. Эта область имеет изображение с высоким разрешением:

<div id="main-container">

    <div id="left-content">
        <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>
        <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>
        <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>
        <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>
    </div>

    <div id="center-content">
        <div><img src="https://farm6.staticflickr.com/5560/14080568109_9f33dc7964_o.jpg"></div>
    </div>

    <div id="right-content">
        <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>
        <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>
        <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>
        <div><img src="http://agevoluzione.com/wp-content/uploads/2014/07/Work-in-progress-1024x603.png"></div>
    </div>
    </div>

</div>

Мне нужно настроить CSS так, чтобы ширина центрального столбца была, самое большее, 100% доступного пространства между боковыми столбцами (другими словами, он всегда должен быть таким: windowSize-column1-column2). Если окно сжимается, мне нужен центральный столбец (и его изображение) для его сжатия.

#main-container
    {
    display: flex;
    justify-content: space-between;
    align-items: center;
    }

#left-content,
#right-content
    {
    width: 102px;

    border-style: solid;
    border-width: 2px;
    border-color: magenta;
    }

#left-content img,
#right-content img
    {
    width: 100px;
    }

#center-content
    {
    }

#center-content img
    {
    max-width: 100%;
    height: auto;
    }

Что мне не хватает?

Ответы

Ответ 1

Правильный способ сделать это с помощью flex. Установите для flex 1 1 auto для среднего столбца и 0 0 auto для боковых столбцов. Это позволяет боковым столбцам всегда иметь указанную ширину (или ширину содержимого, если не указано), а средний столбец занимает оставшееся пространство (соответственно увеличивается/уменьшается). Вот CSS (демо):

#main-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#center-content {
    flex:1 1 auto; /* Lets middle column shrink/grow to available width */
}
#left-content,
#right-content {
    flex:0 0 auto; /* Forces side columns to stay same width */
    width:100px; /* Sets the width of side columns */
}
img {
    max-width:100%; /* Shrinks images to fit container */
}

Ответ 2

#center-content {
    width: calc(100% - 204px);
}

Вот скрипка: http://jsfiddle.net/sachinvermarip/s1j40s42/1/

Ответ 3

Если содержимое раздела автоматического размера в flexbox больше доступной области, которую оно должно было вместить, браузеры (по крайней мере, Chrome и Firefox) НЕ будут учитывать flex:1 1 auto; и столбец/строка будет занимать достаточно места для содержимого, а не целевого контейнера. В результате общая ширина/высота всех столбцов/строк во flexbox будет более 100%.

Если flex:1 1 auto; связан с некоторым явным размером, например width: 10%; , тогда столбец будет правильно подобран по размеру доступного пространства, а 10% будут просто проигнорированы. Размер в px работает одинаково хорошо.

Что-то смешное происходит с overflow: hidden; используется вместо width: 10%; , Результат в Firefox идентичен, но Chrome вырезает содержимое на противоположной оси. Даже если вы установите overflow-y: hidden; Chrome отбраковывает содержимое с правой стороны (ось x).

Вот пример:

#center-content {
  width: 100%;
  height: 10%;
  flex: 1 1 auto;
}

Ответ 4

Существует более простой способ добиться того, что вы просите, и для этого требуется только одна строка CSS (flex-grow: 1).

.main-container {
  display: flex;
  min-height: 100vh;
}

.main-container > div {
  background-color: gray;
}

#center-content {
  flex-grow: 1;
  background-color: red;
}

<div class="main-container">    
  <div id="left-content">
    left
  </div>

  <div id="center-content">
  </div>

  <div id="right-content">
    right
  </div>
</div>

Ответ 5

#center-content
    {
        width:100%;
    }