CSS: Wie skaliere ich einen Container auf die Breite eines dynamisch großen Kindes?

Question

Ich versuche eine Seite mit mehreren adaptiven Containern zu erstellen, die eine Anzahl statischer Elemente sowie ein optionales Element mit dynamischer Breite und Höhe enthalten.

Die Skalierung in der CSS ist etwas grob, da ich es aus einem größeren Blatt herausgenommen habe, aber ich hoffe es zeigt, was ich vorhabe.

Also, was ich nicht zur Arbeit kommen kann, ist dies: Ich würde sehr gerne den dynamischen Container die Breite des dynamischen Elements darin nehmen. Der Container sollte die Breite des dynamischen Elements aufweisen, und die Elemente mit statischer Größe sollten sich innerhalb der Breite des Containers anordnen und die Höhe je nach Bedarf erweitern.

Ich sollte auch darauf hinweisen, dass ich eine reine CSS-Lösung zu schätzen wissen würde. Ich habe nicht diese Option, wo dies eingesetzt werden soll.

---

EDIT: Ich habe ein wenig Verwirrung verursacht, so werde ich klären. Der statische Container ist genau so, wie ich es möchte. Es wickelt sich korrekt und alles ist in Ordnung. Der Container, der das dynamische Element (Blau) enthält, ist der, mit dem ich Probleme habe. Ich möchte, dass der Behälter mit dem blauen Gegenstand die Breite des blauen Gegenstandes annimmt. Die roten Elemente sollten bei Bedarf die HÖHE des dynamischen Containers umschließen und erweitern.

Ich kann das HTML-Layout nicht ändern. Ich kann bei Bedarf zusätzliche Klassen zum HTML hinzufügen.

Ich machte eine aktualisierte Geige mit wie ich das Ergebnis aussehen möchte. Aber ich brauche es dynamisch zu sein. So kann ich nicht nur die Breite des Behälters festgelegt, das ist, wie ich das gemacht: https://jsfiddle.net/mnybon/nwa0gx1h/1/

---

Ich habe eine js-Geige hier sowie den anfänglichen Versionscode für die Archivierung 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

Ich sehe, dass Sie nach flexible boxes css suchen. Beispiel:

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

.dynamicsize-element { 
    flex: 100%; 
} 

Werfen Sie einen Blick auf meine jsfiddle: https://jsfiddle.net/rpje8Lyb/1/

Answer 2

Wenn Sie 2 Container wollen Vertically ausgerichtet, und es sollte die variable Größe Kind Elementbreite versuchen zu besetzen diese

Anzeige: Tabellen- caption -> Diese Elemente verhalten sich wie HTML-Elemente. aber es verursacht vertikales Layout.

diese CSS hinzufügen

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

Fiddle Link