Ich habe ein Problem mit der Flexbox.

Ich benutze einen Container mitflex-direction: column; flex-wrap: wrap, so können meine inneren Elemente tatsächlich in mehreren Spalten platziert werden.

Das Problem ist, dass der Browser die Breite des Containers immer noch als @ berechne eine Summe der Breiten der inneren Gegenstände!

Mein Containerblock sollte eine kleinere Breite haben (basierend auf der Inhaltsgröße), aber tatsächlich ist er riesig.

Anyway, es ist auch sehr unnatürlich, die Breite des Containers auf diese Weise zu berechnen, wenn Spalten und keine Zeilen verwendet werden.

Schauen Sie sich den grünen Block in meinem Code an. Es hat ein riesiges mit, aber es sollte nicht so sein. Außerdem wird es kleiner, wenn Sie ein Objekt aus dem Container entfernen.

Was ich erwarte, ist, dass der Container eine geringe Breite hat, sodass er nicht mehr als die Hälfte des verfügbaren Platzes beansprucht.

Hat dies auf der neuesten Safari und Chrome auf der neuesten OS X-Version überprüft.

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>