nasıl Böyle bir dom yapısında FlexBox

Question

kullanılarak eşit parçaya bölünmesi zorlamak için: eşit olarak dağıtılacak kimliği 2 ve 4 ile

#1{ 
    display: flex; 
    flex-direction: row; 
} 
#2, #4{ 
    flex: 1; 
} 

div:

<div id="1"> 
    <div id="2"> 
    <div id="3"> 
    </div> 
    </div> 
    <div id="4"> 
    <div id="5"> 
    </div> 
    </div> 
</div> 

CSS ile belirtilen kimliğine sahip dom genişliğini aşmaması id 3 ve 5 içeriğinin genişliği toplamından sürece 1. toplamı genişliğini aşan

, bunlar eşit geniş içerikli dağıtılmış ve bir edilmez will ta daha fazla genişlik kazanın. 2 ve 4'ü, bu gibi durumlarda bile, esnek kutu kullanarak genişliğe kadar çekmeye nasıl zorlayabilirim?

Genişlik belirtimini yüzde olarak kullanmak istemiyorum. Ben flexbox'a bağlı kalmak istiyorum.

Answer 1

Eğer elemanlar yetiştirmek veya onun içeriği bağımsız küçültmek, belirtmek istiyorsanız sıfır flex basis:

flex-basis: 0; 

Ancak my demo hatalı Chrome'da çalışır: Büyük görüntü olursa olsun üst kapsayıcı var temelini ayarlandı sıfır olduğunu uzanıyor . Bir çözüm olarak, maksimum genişlik ayarlanabilir: tüm

img { 
    max-width: 100%; 
    height: auto; 
}