Mutlak div içindeki elemanların duyarlı genişliği?

Question

Ben mutlak kabın içindeki bazı kutularına duyarlı bir genişliğe eklemeye çalışıyorum:

JSFiddle

Kod parçacığını konteyner ve kutu elemanları açısından: konteyner verilmesi

.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; 
} 

ve % 100 kutuları, tarayıcıyı yeniden boyutlandırırken duyarlı genişlik sağlamaz. Bir div içindeki kutu elemanlarını mutlak olmayan konumlandırma ve% 100 genişlik ile sarmaya çalıştığımda, bu şeyleri parçalar.

Yapmaya çalıştığım şeyi başarmak mümkün mü yoksa sadece kötü bir yaklaşım mı kullanıyorum?

Teşekkür ederiz!

Answer 1

Bunun peşinde olduğunuzdan emin olun, ancak min ve maksimum genişlik değerlerinizi vw veya% olarak değiştirdiğinizde kutular kırılmaz.

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