不能在 flexbox 流中包装列，除非在 Chrome 下答案

【问题标题】：Can't wrap columns in a flexbox flow except under Chrome不能在 flexbox 流中包装列，除非在 Chrome 下
【发布时间】：2017-06-22 14:00:53
【问题描述】：

如何修复“内容”div 的最大高度。该代码仅在 Chrome 下有效：/

“内容”div 不应扩展到窗口底部之外。项目应向右换行。

item1 item4 item7 项目 2 项目 5 ... item3 item6

html

  <div class="top">
    <div class="title">Title</div>
  </div>

  <div class="wrapper">

   <div class="left">
     <div class="link">Link</div>
   </div>

   <div class="content">
     <div class="item">Item1</div>
     <div class="item">Item2</div>
     <div class="item">Item3</div>
     <div class="item">Item4</div>
     <div class="item">Item5</div>
     <div class="item">Item6</div>
     <div class="item">Item7</div>
     <div class="item">Item8</div>
     <div class="item">Item9</div>
     <div class="item">Item10</div>
     <div class="item">Item11</div>
     <div class="item">Item12</div>
     <div class="item">Item13</div>
     <div class="item">Item14</div>
     <div class="item">Item15</div>
     <div class="item">Item16</div>
     <div class="item">Item17</div>
     <div class="item">Item18</div>
     <div class="item">Item19</div>
   </div>

  </div>

</div>

css

html, body { height: 100%; margin: 0px; padding: 0px }
.main {
  height: 100%;
  max-heigth: 100%; /* not required under chrome, do not works for others */
  display: flex;
  flex-direction: column;
  background-color: red;
  color: white;
}
.wrapper {
  flex: 1 1 auto;
  display: flex;
  background-color: silver;
}
.left {
  width: 50px;
  background-color: lightblue;
}
.content {
  flex:1;
  display: flex;
  flex-flow: column wrap; /* warp only under Chrome */
}

https://jsfiddle.net/L7zzucms/

【问题讨论】：

您的max-height 无法在任何地方使用。它拼写错误（在您的问题和演示中）。但我认为这不是问题所在。
它不起作用，因为 Chrome 不要求您在 .content 容器上定义高度。 FF、Edge 和可能的其他浏览器需要定义的高度。 jsfiddle.net/L7zzucms/4

标签： html css flexbox

【解决方案1】：

将您的 wrapper 规则更改为此，它可以在任何地方使用（在 Chrome、Firefox、Edge、IE11 上测试）

.wrapper {
  height: 100%;
  display: flex;
  background-color: silver;
}

Updated fiddle

我认为content 中的flex: 1 需要一个高度，而不是flex: 1 1 auto，才能正确包装

【讨论】：