ディビジョンがウィンドウのサイズ変更で正しくサイズ変更されない

Question

私は3つのdivを持つウェブサイトを作っています。私はそれらをラッパーに適切にフィットさせようとしていますが、ウィンドウのサイズを変更すると、ウィンドウが小さくなると緑のボックスが他の2つの下に表示されます。ウィンドウのサイズを変更すると、divのサイズが正しく調整されていないように見えます。ここに私が持っているものがあります：https://jsfiddle.net/nq5qwwnc/。

はここで私は何をしようとしていることは、ウィンドウのサイズが変更しても、互いの隣にそれらすべてを保つあるwrappe

`  
    width: 70vw; 
    height: 80vh; 
    max-width: 1920px; 
    max-height: 1080px; 
    left: 50%; 
    border: 2px solid black` 

です。

Answer 1

flexboxesにお問い合わせください。これらは、要素を行や列に配置する非常に簡単な方法を提供します。例えば、あなたの例で

：

#mainWrapper { 
    display: flex; 
} 

.firstBox, .thirdBox { 
    flex: 0 0 20%; 
} 

.secondBox { 
    flex: 0 0 55%; 
} 

これは幅が20％幅、及び第2の箱55％であることが第一と第三のボックスに伝えます。 0 0部分は、ボックスがメインラッパーの残りのスペースに合わせて動的に拡大するかどうかを決定します。私はこのケースで成長しないように設定しました。

あなたがjsフィドルでこれを動作させることができるかどうか試してみてください！