Wie kann ich einen Flexbox-Container erstellen, der sich so dehnt, dass er zu den verpackten Objekten passt?

Question

Ich möchte einen Flexbox-Container , dessen Breite wächst, um die enthaltenen Elemente zu passen.

In this codepen:

Der graue div ist der FlexBox Behälter, und die roten divs sind innen und legte die in Spalten mit FlexBox enthalten. Das graue Div muss seine Breite erweitern/verkleinern, um die roten Kinder-Divs perfekt zu enthalten. Ist das möglich?

.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    max-height: 290px; 
 
    align-content: flex-start; 
 
    padding: 2px; 
 
    background: grey; 
 
} 
 
.child { 
 
    background: red; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 2px; 
 
}

<div class="container"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div>

Answer 1

„Lösung“

ich den Begriff Lösung verwenden leicht, da dies irrsinnig schwierig ohne feste Reihen zu tun, wie Tomas vorgeschlagen (dh ohne den HTML-Code zu einer Änderung eher konventionellen Stil), oder im Allgemeinen ohne ein hohes Maß an Hacking. Darüber hinaus sind die Höhenhälften, sofern nicht 2 Reihen abgeschlossen sind, und das enthaltende div nicht zuverlässig verkleinert werden kann; Kommentieren Sie Kind 7 und sehen Sie, was passiert. Dann, wenn Sie auch 8 auskommentieren, sehen Sie, dass es wieder "normal" ist.

I have been messing around for an hour or so and the best I can come up with is in this fiddle.

---

Ich mag würde ein wenig Hintergrund

Der Standard flex-flow ist row nowrap, dies setzt eine gewisse Breite x auf das Element Glück, bieten diese Regel zu erhalten. Es scheint, dass in diesem Fall das Ändern der flex-flow zu columnnicht zurückgesetzt die Breite x definiert für dieses Element. Das Element nimmt die Breite x als wäre es flex-flow: row nowrap (versuchen Sie dies für sich).

Es gibt einen ganzen Haufen Breite Vererbung Probleme, die daraus stammen, können wir nicht stellen Sie die flex-basis Eigenschaft (gemeint ist nicht so glaube ich verhalten), so müssen wir alles in einem anderen Element wickeln .container die wir Breite definieren können auf , und setzen Sie stattdessen die tatsächlichen Spaltenstile auf ein .row Element. Jedoch wird .container auch nicht schrumpfen. Im besten Fall haben wir unsere Spalte richtig in der Breite mit dem .container (ing) -Element definiert, damit beide eine eigene Sache machen.

So benötigen wir ein Pseudo-Element ::after, um den Hintergrund mit der richtigen Breite zu liefern, einschließlich einiger margin und calc() Hacks, um Padding zu simulieren.

Ich könnte viel mehr eingeben, aber ich denke nicht, dass dies eine praktikable Lösung überhaupt ist, wirklich nur ein "Beweis" dafür, wie es nicht gut gemacht werden kann.

Wenn Sie mehr Zeilen hinzufügen möchten, müssten Sie die Breite von 50% für 2 (1/2) auf 33% für 3 (1/3) usw. ändern ... es ist nicht wirklich so skalierbar wie Bearbeiten Sie den HTML-Code selbst.

Also, es gibt eine funktionierende Demo für nur 2 Zeilen, aber vorerst scheint das mit der aktuellen HTML-Markup-Struktur nicht plausibel.

Answer 2

Sie haben keine Breite Verhalten von Eltern-Element festgelegt. Set .container Anzeige-Eigenschaft zu Inline-Block und für jedes .Row Element Anzeige hinzufügen: Flex-Eigenschaft.

.container { 
 
    display: inline-block; 
 
    max-height: 290px; 
 
    padding: 2px; 
 
    background: grey; 
 
} 
 
.row{ 
 
    display:flex; 
 
} 
 
.child { 
 
    background: red; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 2px; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    </div> 
 
</div>