Html Can'；t在flexbox流程中包裹柱，但在Chrome下除外

如何确定“内容”分区的最大高度。该代码仅在Chrome下有效：/

“content”div不应扩展到窗口底部之外。这些物品应该向右包装

项目1项目4项目7 第2项第5项。。。 项目3项目6

html

---

将您的

包装规则更改为此，它可以在任何地方工作（在Chrome、Firefox、Edge、IE11上测试）


我想
content
中的
flex:1
需要一个高度，而不是
flex:1 auto
，才能正确包装
max height
在任何地方都不起作用。它拼写错误（在您的问题和演示中）。但我不认为这是问题所在。它不起作用，因为Chrome不要求你在
.content
容器上定义高度。FF、Edge和其他浏览器可能需要一个定义的高度。
  <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>

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 */
}

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