缩小以适应 Flexbox 或 Flex-basis 中的内容：内容解决方法？

我有一个网络应用程序，我使用 Flexbox 进行布局。

我试图既填充屏幕（它是一个应用程序，而不是文档），又尽可能不指定任何固定的宽度或高度，因为内容可能是各种各样的东西（完全流畅的布局！梦想！）

因此，我需要流体高度、全宽页眉和页脚，然后中间的主面板填充剩余的垂直空间，分为几列，每列在太高时滚动，并且每个非主列的宽度应缩小以适应其内容，以及使用剩余空间的主列。

我非常接近，但不得不求助于明确调整非主列的大小 - 我相信flex-basis: content;应该这样做，但浏览器尚不支持。

这是一个最小演示 http://jsfiddle.net/4ovu226m/显示固定大小的列：

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>

看起来像这样 - 我想要列One and Two缩小/增长以适应而不是固定：

我的问题是，是否有一个仅 CSS 的解决方法flex-basis: content，或者实现这一目标的替代方法？

我可能可以忍受像上面那样固定列大小，或者使用 javascript，但我有一个该死的梦想。

我希望第一列和第二列收缩/增长以适应而不是 固定的。

你有没有尝试过：flex-basis: auto

or this: flex: 1 1 auto，其缩写为：

• flex-grow: 1（按比例增长）
• flex-shrink: 1（按比例缩小）
• flex-basis: auto（初始大小基于内容大小）

or this:

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

修改后的演示 http://jsfiddle.net/4ovu226m/1/

Related:

• 使弹性项目采用内容宽度，而不是父容器的宽度 https://stackoverflow.com/q/40141163/3597276
• 让 Flex 容器采用内容的宽度，而不是宽度 100% https://stackoverflow.com/q/42686681/3597276