为什么下面的 flexbox 大小奇怪（Chrome 40）？

Question

我的 flex 容器中有三个盒子。预计所有内容都不会大于其内容。页眉和页脚内容预计会非常小，但主要内容可能会溢出——在这种情况下它应该开始滚动。

我不想在任何地方硬编码页眉或页脚的大小。

我全部用了flex: 0 1 auto，中间一个用了overflow: auto。
这是完整的示例（单击主要部分以添加更多列表项）：

$(function() {
    $('.main').click(function() {
        $('ol').append('<li>Item</li>');
    });
});

.wrapper {
  display: flex;
  flex-direction: column;
  border: 1px solid #eee;
  height: 400px;
  width: 247px;
  color: white;
}

header {
  background-color: #1abc9c;    
  flex: 0 1 auto;
}

.main {
  background-color: #3498db;
  flex: 0 1 auto;
  overflow: auto;
  cursor: pointer;
}

footer {
  background-color: #34495e;
  flex: 0 1 auto;
}

/* ignore this, just making things nicer */
body { font-family: 'Segoe UI', 'OpenSans', sans-serif; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <header>Header</header>
  <div class="main">
    <ol>
      <li>Item</li>
    </ol>
  </div>  
  <footer>Footer</footer>
</div>

这主要是可行的，但是一旦 .main 开始溢出，Chrome 开始将页眉和页脚的大小每项减少约一个像素，结果是：

这不会发生在 Firefox 中。

这是 Chrome 还是 Firefox 的错误？正确的做法是什么？

Answer 1

找到 "what's the right way" 的答案：页眉和页脚应该 flex: 0 0 auto 因为它们不应该缩小。

但是，这似乎是 https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored 中描述的错误——即使 1 也不应该将它们缩小到超出内容大小。我假设因为它是一个开放的错误，所以 Chrome 和 Firefox 之间的任何行为不一致都是可以预料的。

更新：
在 Chrome 45 中按预期工作。Link 上面指定它已在 Chrome 44 中修复，因此它可能是一个错误 (https://code.google.com/p/chromium/issues/detail?id=426898)。

为什么下面的 flexbox 大小奇怪（Chrome 40）？

Why is the following flexbox sizing weirdly (in Chrome 40)?

css

flexbox