Prevent Behälter aus Verpackung, machen sie wickeln ihre Kinder statt

Question

Mein Layout etwas wie folgt aussieht:

<div class="left"> 
    ... 
</div> 

<div class="right"> 
    <div class="inner" /> 
    ... a bunch of these ... 
    <div class="inner" /> 
</div> 

CSS:

div { display: inline-block; } 
.left { width: 25%; } 
.right { width: 75%; } 
.inner { width: 33%; } 

Ich möchte folgendes tun:

Wenn der Bildschirm ist in normaler Größe:

+--+-----+ 
| |O O O| 
| |O O O| 
+--+-----+ 

Was ich passieren soll, wenn ich die Breite des Browsers reduzieren:

+--+---+ 
| |O O| 
| |O O| 
| |O O| 
+--+---+ 

Was passiert eigentlich:

+--+ 
| | 
| | 
+--+ 
+-----+ 
|O O O| 
|O O O| 
+-----+ 

Und wenn ich noch weiter den Browser schrumpfen: (Ich möchte auch dies vermeiden)

+--+ 
| | 
| | 
+--+ 
+---+ 
|O O| 
|O O| 
|O O| 
+---+ 

Ist das machbar?

Answer 1

Dies würde Ihnen ein besseres Ergebnis geben, hoffe ich.

div { 
 
    display: inline-block; 
 
    margin: 0 auto; 
 
} 
 

 
.left { 
 
    width: 25%; 
 
    float: left; 
 
} 
 

 
.right { 
 
    width: 75%; 
 
    float: right; 
 
} 
 

 
.inner { 
 
    width: 33%; 
 
}

<div class="left"> 
 
    ... 
 
</div> 
 

 
<div class="right"> 
 
    <div class="inner" /> ... a bunch of these ... 
 
    <div class="inner" /> 
 
</div>

Answer 2

Ja, Sie können es mit Flexbox tun.

html

<div class="parent"> 
    <div class="left">Some Stuff</div> 
    <div class="right">Some other stuff</div> 
</div> 

css

.parent { 
    display: flex; 
    height: 100vh; 
    width: 100vw; 
} 

.left, .right { 
    flex: 1 1 auto; 
    border-color: black; 
    height: 100%; 
    width: 100%; 
} 

.left{ 
    background-color: red; 
} 
.right{ 
    background-color: blue; 
} 

Arbeits Code Stift hier https://codepen.io/seekheart/pen/BRNrER