Execute Execute - 4 years ago 89
CSS Question

Can't wrap columns in a flexbox flow except under Chrome

How can I fix the max-height of the "content" div. The code works only under Chrome :/

the "content" div should not expand outside the bottom of the window. the items should wrap to the right.

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 Source

Change your wrapper rule to this and it works everywhere (tested on Chrome,Firefox,Edge,IE11)

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

Updated fiddle

I suppose the flex: 1 in content need a height, other than flex: 1 1 auto, from its parent to be able to wrap properly

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download