Сжимать, чтобы соответствовать содержимому в flexbox, или flex-basis: обход контента?

У меня есть webapp, с которым я использую flexbox для макета.

Я пытаюсь как заполнить экран (это приложение, не документ), так и, насколько это возможно, не указывать фиксированную ширину или высоту, поскольку контент может быть любым видом (полная компоновка жидкости! снилось!)

Итак, мне нужны высоты жидкости, верхние и нижние колонтитулы полной ширины, а затем основная панель в середине, заполняющая оставшееся вертикальное пространство, разделенное на столбцы, каждый из которых прокручивается, когда слишком высокий, и где ширина каждого непервичного столбец должен сжиматься, чтобы соответствовать его содержимому, и первичный столбец, который использует оставшееся пространство.

Я так близко, но мне приходилось прибегать к явным подбором неосновных столбцов - я считаю, что flex-basis: content; должен это делать, но пока не поддерживается браузерами.

Здесь минимальная демонстрация, показывающая столбцы фиксированного размера:

var list = document.querySelector('ul')

for (var i = 0; i < 100; i++) {
  var li = document.createElement('li')
  li.textContent = i
  list.appendChild(li)
}

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}
body {
  display: flex;
  flex-direction: column;
}
main {
  display: flex;
  flex-direction: row;
  overflow: hidden;
}
main > section {
  overflow-y: auto;
  flex-basis: 10em;
  /* Would be better if it were fluid width/shrink to fit, unsupported: */
  /* flex-basis: content; */
}
main > section:last-child {
  display: flex;
  flex: auto;
  flex-direction: column;
}
main > section:last-child > textarea {
  flex: auto;
}

<header>
  <h1>Heading</h1>
</header>

<main>
  <section>
    <h1>One</h1>
    <ul>
    </ul>
  </section>

  <section>
    <h1>Two</h1>
  </section>

  <section>
    <header>
      <h1>Three</h1>
    </header>
    <textarea></textarea>
    <footer>
      <p>Footer</p>
    </footer>
  </section>
</main>

<footer>
  <p>Footer</p>
</footer>

Ответ 1

Оказывается, он сжимается и растет правильно, обеспечивая желаемое поведение; за исключением того, что во всех текущих браузерах flexbox не учитывалась вертикальная полоса прокрутки! Вот почему контент, похоже, отключается.

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

http://jsfiddle.net/2w157dyL/1/

Однако, если вы сделаете контент в этом столбце более широким, вы увидите, что он всегда сокращает его на ту же сумму, которая является шириной полосы прокрутки.

Итак, исправление очень, очень просто - добавьте достаточно правильного дополнения для учета полосы прокрутки:

http://jsfiddle.net/2w157dyL/2/

  main > section {
    overflow-y: auto;
    padding-right: 2em;
  }

Ответ 2

Я хочу, чтобы колонки One и Two сокращались/расширялись, а не исправлена.

Вы пробовали: flex-basis: auto

или это:

flex: 1 1 auto, что является сокращением для:

flex-grow: 1 (пропорционально возрастает)
flex-shrink: 1 (пропорционально сжимается)
flex-basis: auto (начальный размер на основе размера содержимого)

или это:

main > section:first-child {
    flex: 1 1 auto;
    overflow-y: auto;
}

main > section:nth-child(2) {
    flex: 1 1 auto;
    overflow-y: auto;
}

main > section:last-child {
    flex: 20 1 auto;
    display: flex;
    flex-direction: column;  
}

измененная демо

Связанный: