flexbox Spalte strecken, um Inhalt zu passen

Question

Goodday Kollegen Entwickler,

Ich möchte einen Container erstellen, der Inhalt von oben nach unten und von links nach rechts gehen kann. Der übergeordnete Container muss gedehnt werden, um zu passen, aber innerhalb der maximal definierten Werte.

Ich habe Flexbox für diesen Zweck verwendet, aber ich bekomme nicht den Eltern-Container zu strecken, um zu passen. Hat jemand irgendwelche Vorschläge, ohne meinen Weg mit Javascript zu hacken, um die Breite zu berechnen?

.flex-container { 
 
    display: inline-flex; 
 
    background-color: #ccc; 
 
} 
 

 
.flex-container-content{ 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex-direction: column; 
 
    max-height: 300px; 
 
    max-width: 1000px; 
 
    background-color: #333; 
 
} 
 

 

 
.flex-container-content > div { 
 
    background-color: #EB213C; 
 
    width: 100px; 
 
    margin: 10px; 
 
    text-align: center; 
 
    line-height: 75px; 
 
    font-size: 30px; 
 
}

<div class="flex-container"> 
 
    <div class="flex-container-content"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    <div>4</div> 
 
    <div>5</div> 
 
    <div>6</div> 
 
    <div>7</div> 
 
    <div>8</div> 
 
    <div>9</div> 
 
    <div>10</div> 
 
    <div>11</div> 
 
    <div>12</div> 
 
    </div> 
 
</div>

Answer 1

Haben Sie wirklich brauchen die äußere Inline Behälter? Ich würde diesen Ansatz vorschlagen:

.flex-container { 
 
    display: flex; 
 
    background-color: #ccc; 
 
} 
 

 
.flex-container-content{ 
 
    display: flex;  
 
    flex-flow: column wrap; 
 
    
 
    max-height: 300px; 
 
    max-width: 1000px;  
 
    background-color: #333; 
 
} 
 

 
.flex-container-content > div { 
 
    background-color: #EB213C; 
 
    width: 100px; 
 
    margin: 10px; 
 
    text-align: center; 
 
    line-height: 75px; 
 
    font-size: 30px; 
 
}

<!-- <div class="flex-container"> --> 
 
    <div class="flex-container-content"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    <div>4</div> 
 
    <div>5</div> 
 
    <div>6</div> 
 
    <div>7</div> 
 
    <div>8</div> 
 
    <div>9</div> 
 
    <div>10</div> 
 
    <div>11</div> 
 
    <div>12</div> 
 
    </div> 
 
<!-- </div> -->