絶対div内の要素の応答幅？

Question

は、私は絶対的なコンテナの内部でいくつかの箱に応答幅を追加しようとしています：

JSFiddle

コードスニペットをコンテナボックスの要素に関しては：コンテナを与える

.popbody{ 
    position: absolute; 
    margin: auto; 
    top: 0; left: 0; bottom: 0; right: 0; 
    max-width: 830px; 
    max-height: 450px; 
    width: 100%; 
} 

.popboxes{ 
    position: relative; 
    width: 100%; 
    max-width: 166px; 
    min-width: 120px; 
    height: 100%; 
    max-height: 90px; 
    min-height: 75px; 
    float: left; 
} 

と100％ではブラウザのサイズを変更すると応答幅が有効になりません。 div要素の内側に非絶対配置と100％幅のボックス要素をラップしようとすると、要素が分割されます。

私がやろうとしていることを達成することは可能ですか、それとも悪いアプローチを使用していますか？

ありがとうございました！

Answer 1

これがあなたのものであるかどうかは分かりませんが、最小幅と最大幅の値をvwまたは％に変更すると、ボックスが分割されません。

DEMO

.popbody{ 
    position: absolute; 
    margin: auto; 
    top: 0; left: 0; bottom: 0; right: 0; 
    max-width: 830px; 
    max-height: 450px; 
    width: 100%; 
} 

.popboxes{ 
    position: relative; 
    width: 100vw; 
    max-width: 20vw; 
    min-width: 15vw; 
    height: 100%; 
    max-height: 90px; 
    min-height: 75px; 
    float: left; 
} 

.boxinner{ 
    position: absolute; 
    background: blue; 
    left: 0; 
    right: 12px; 
    top: 0; 
    bottom: 8px; 
} 

.redbox{ 
    position: relative; 
    width: 100vw; 
    max-width: 50vw; 
    height: 100%; 
    float: right; 
    background-color: red; 
} 

Viewport Sized Type