フレックスボックスの列はコンテンツに合わせて伸びます

Question

おはようございます開発者、

コンテンツを上から下に、左から右に移動できるようにするコンテナを作成します。親コンテナは、最大限に定義された値に収まるようにストレッチする必要があります。

私はこの目的でフレックスボックスを使用しましたが、親コンテナが伸びてフィットすることはありません。誰もが幅を計算するためにjavascriptで私の方法をハックすることなく、任意の提案を持っていますか？

.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

あなたは本当に外インラインコンテナが必要でしたか？私はこのアプローチを示唆している：

.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> -->