CSS：コンテナのサイズを動的にサイズの変更された子の幅に合わせるにはどうすればよいですか？

Question

私はいくつかのアダプティブコンテナを持つページを作成しようとしています。このコンテナには、静的サイズの要素の数と、動的な幅と高さを持つオプションの要素が含まれます。

CSSのスケーリングは、大きなシートから切り出しているので少しラフカットですが、私はそれが私が何をしようとしているかを示してくれることを願っています。

だから私は仕事に着手できないのはこれです：私は非常に動的なコンテナの中で動的な要素の幅を取るようにしたいと思います。 コンテナは動的要素の幅にする必要があり、内部の静的なサイズの要素はコンテナの幅内で順序付けし、必要に応じて高さを拡張する必要があります。

私は、純粋なCSSソリューションに感謝します。私はこれが展開されるべきところにそのオプションはありません。

---

編集：私は少し混乱の原因と思われるので、私は明確にします。 静的コンテナは、私が望むのとまったく同じです。それは正しくラップし、すべてが問題ありません。動的（青色）要素を含むコンテナは、私が問題があるものです。私は、青の項目を持つコンテナが青の項目の幅を取るようにしたい。赤い項目は、必要に応じてダイナミックコンテナの高さを折り返して拡張する必要があります。

HTMLレイアウトを変更することはできません。必要に応じて、追加のクラスをhtmlに追加できます。

私はどのように結果を見たいと思って更新フィドルを作った。しかし、私はそれが動的である必要があります。だから私はちょうど私がこれを作った方法ですコンテナの幅を設定することはできません。https://jsfiddle.net/mnybon/nwa0gx1h/1/

---

私はここのJS-フィドルなど https://jsfiddle.net/mnybon/nwa0gx1h/

をアーカイブするための最初のリビジョンコードを持っていますCSS

.site { 
    height: 100vh; 
    width: 100vw; 
    background-color: rgb(40, 40, 40); 
    overflow-x: hidden; 
    overflow-y: auto; 
} 

.container { 
    min-width: 30vw; 
    max-width: 100%; 
    background-color: green; 
    box-sizing: border-box; 
    padding: 1vh 1vw; 
    text-align: center; 
    display: inline-block; 
} 

.container.fixed{ 
    width: 30vw; 
} 

.fixedsize-element { 
    background-color: red; 
    width: 50px; 
    height: 50px; 
    display: inline-block; 
    margin: 2px; 
} 

.variable-element { 
    width: 44vw; 
    height: 20vh; 
    background-color: blue; 
    margin: auto; 
} 

HTML

<div class="site"> 
    <div class="container dynamic"> 
    <div class="fixedsize-element"> 

    </div> 
    <div class="fixedsize-element"> 

    </div> 
    <div class="fixedsize-element"> 

    </div> 
    <div class="fixedsize-element"> 

    </div> 
    <div class="fixedsize-element"> 

    </div> 
    <div class="fixedsize-element"> 

    </div> 

    <div class="fixedsize-element"> 

    </div> 

    <div class="fixedsize-element"> 

    </div> 

    <div class="fixedsize-element"> 

    </div> 
    <div class="variable-element"> 

    </div> 
    <div class="fixedsize-element"> 

    </div> 

    <div class="fixedsize-element"> 

    </div> 

    <div class="fixedsize-element"> 

    </div> 

    <div class="fixedsize-element"> 

    </div> 

    </div> 

    <div class="container fixed"> 
    <div class="fixedsize-element"> 

    </div> 
    <div class="fixedsize-element"> 

    </div> 
    <div class="fixedsize-element"> 

    </div> 
    <div class="fixedsize-element"> 

    </div> 
    <div class="fixedsize-element"> 

    </div> 
    <div class="fixedsize-element"> 

    </div> 

    <div class="fixedsize-element"> 

    </div> 

    <div class="fixedsize-element"> 

    </div> 

    <div class="fixedsize-element"> 

    </div> 
    </div> 
</div> 

Answer 1

あなたはflexible boxes cssを探しています。例：

.container { 
    display: flex; 
    flex-wrap: wrap; 
} 

.dynamicsize-element { 
    flex: 100%; 
} 

私jsfiddleを見てみましょう：https://jsfiddle.net/rpje8Lyb/1/

Answer 2

あなたは2つの容器は垂直に整列し、それが可変サイズの子要素の幅は、この

表示してみてください占める必要がありますしたい場合は、次のテーブル - をキャプション - >これらの要素はHTML要素のように動作します。 ですが、垂直方向のレイアウトが発生します。

ラッパーの周りのサイズの要素が固定かどうかを追加できます。このCSS

.container.dynamic{ display: table-caption; } 

Fiddle Link