Question

我尝试使用粘性页眉和页脚创建Flexbox布局。一切正常，直到我打开flex-wrap：wrap模式并在我的容器中放入很多长文本。

这是html：

<html>
<body>
  <div class="container">
    <div class="head">head</div>
    <div class="main">
      <h1>Main</h1>
      <p>very long text...</p> 
      <p>very long text...</p>
      <p>very long text...</p>
      <p>very long text...</p>
      <p>very long text...</p>
    </div>
  </div>
</body>
</html>

这是css：

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.container {
  display: flex;
  flex-wrap: wrap;  /* < REMOVE THIS AND EVERYTHING WORKS FINE */
  flex-direction: column;
  height: 100vh;
  border: 1px solid red;
}
.container > * {
  border: 1px solid silver;
}
.container > .main {
  flex-grow: 1;
  overflow-y: auto;
}

以下是Codepen示例。

我需要自动换行功能，因为我想将此css用于其中应该水平包装列布局内容的其他部分。

BTW我很好奇为什么会这样？对这个问题有任何'官方'解释吗？这是一个已知的错误吗？

编辑：我使用Chrome v53.0.2785.143

进行了测试

包裹

0 个答案: