Flexbox arka planı yatay taşmadaki çocukları kapsamaz.

Question

Asgari genişliğe sahip (önceden bilinmeyen) bir çocuk sayısına sahip bir ana kapsayıcım var. Tarayıcıyı küçülen çocukların bulunduğu noktayı yeniden boyutlandırdığımda, ana arka plan pencereyle küçülür ve çocukları kapsamaz.

jsfiddle

nasıl ebeveyn geçmişi sağlanması hakkında giderdim

.row{ 
    display:flex; 
    background-color:#fcc; 
    background-size:cover; 
} 
.row:nth-child(odd){ 
    background-color:#fbb; 
} 
.child{ 
    min-width:150px; 
    border:1px #ccc solid; 
    flex-grow:1; 
} 

<div class="row"> 
    <div class="child"> content </div> 
    <div class="child"> content </div> 
    <div class="child"> content </div> 
</div> 
<!--more rows follow--> 

tüm çocukları kapsayan ?

.row öğesinde width:100%, background-size:cover'u eklemeye çalıştım. Ayrıca, her şeyi bir kapsayıcıya sarmayı ve bunun için overflow:auto'u ayarlamayı denedi.

İşi halledebilmemin tek yolu, overflow:auto'u .row öğesine koyarsam, ancak her satırın diğerlerinden bağımsız olarak yatay olarak kaydırılabilir olmasını sağlar.

Zaten this mesajını gördüm, ancak tam olarak ihtiyacım olan şey değil - Hiçbir esnek öğeyi sarmalamıyorum, nokta onların oldukları gibi kalmaları.

Ayrıca this makalesini de okuyorum, ancak sorunuma yardımcı olabilecek hiçbir şey göremiyorum.

Answer 1

Muhtemelen istiyorum display: inline-flex;

Kontrol:https://jsfiddle.net/n5s3n3g8/1/