css - 列が収まるように縮小されたフレックス コンテナーを作成する

Question

子が列に入力する必要があるコンテナがあるとします。コンテナーの高さは制限されており、すべての子孫が収まるように、必要に応じて幅または幅を狭くする必要があります。次のようになります。

これを作るために私は試しflexboxます。問題は、シュリンク トゥ フィットにすることは可能かということです。

• float:left: Chrome ではこのトリックはまったく実行されません。Firefox では、コンテナーの幅は 1 列のみです -例 1
• position:absolute: 通常の流れには寄与しないため、これを破棄します。

今のところ、ブラウザーの範囲を Chrome と FF に絞り込みます。

HTML:

<div class="flexcontainer wrap column">
    <div></div>
    <div></div>
    ...
</div>

CSS:

.flexcontainer{
    display: flex;              /* make it a flexbox */
    flex-flow: column wrap;     /* make it a column container, and fill them one after another */

    align-content: stretch;
    align-items: center;
    justify-content: center;

    float: left;                /* shrink-to-fit */

    max-height: 450px;          /* limit the height */
    min-height: 300px;
}
.flexcontainer > div {
    height: 100px;            
    margin: 3px;
    width: 100px;               /* set the width of descendants */
}

ありがとう！