Question

如何修复＆＃34;内容＆＃34;的最大高度？ DIV。该代码仅适用于Chrome：/

＆＃34;内容＆＃34; div不应该扩展到窗口的底部。这些物品应该包裹在右边。

item1 item4 item7 item2 item5 ... 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/

Answer 1

将您的wrapper规则更改为此规则，它适用于所有地方（在Chrome，Firefox，Edge，IE11上测试）

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

Updated fiddle

我认为flex: 1中的content需要一个高度，而不是flex: 1 1 auto来自其父级，以便能够正确包裹

除了Chrome之外，无法在flexbox流中包装列

1 个答案: