I ran into a problem when using flexbox.
I'm using a container with flex-direction: column; flex-wrap: wrap, so my inner items can actually be placed in multiple columns.
The problem is that the browser still calculates the container's width as a sum of inner items' widths!
My container block should have a smaller width (based on content size), but it is actually huge.
Anyway, it's also very unnatural to calculate container's width this way when using columns, not rows.
Take a look at the green block in my code. It has a huge with, but it isn't supposed to have so. Also, it gets smaller as you remove an item from the container.
What I expect is to have the container with small width, so it wouldn't take more than a half of the available space.
Checked this on the latest Safari and Chrome on the latest OS X.
JSFiddle
.container {
display: flex;
flex-wrap: wrap;
flex-direction: column;
background: #aa0000;
height: 100px;
}
.group {
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-content: flex-start;
}
.g1 {
background: #00aa00;
}
.g2 {
background: #0000aa;
}
<div class="container">
<div class="group g1">
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
</div>
<div class="group g2">
<div class="item">Item</div>
</div>
</div>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
