taşma

2016-03-30 31 views
0

kaydırmak için ayarlandığında çocuk ebeveynin genişliğine genişletmek olun ben şu sorun var: burada tekrartaşma

Here a link to JsFiddle

Ve kaynaklar:

burada
<div class="folder_browser_panel_item"> 
    <div class="folder_browser_panel_item_head"> 

    </div> 
    <div class="folder_browser_panel_item_content"> 
    Foo Foo Foo Foo Foo Foo Foo Foo Foo Foo Foo Foo Foo Foo Foo 
    </div> 
</div> 

.folder_browser_panel_item { 
    height: 330px; 
    width: 200px; 
    overflow-x: scroll; 
} 

.folder_browser_panel_item_head { 
    background: red; 
    height: 100px; 
} 

.folder_browser_panel_item_content { 
    background: black; 
    width: 400px; 
    height: 200px; 
    color: white; 
} 

Eğer bir kapsayıcı div görebilirsiniz diğer 2 div içeren. Konteynerin kendisi, kaydırılacak şekilde ayarlanmış taşma özelliğine sahiptir. Bu kapsayıcıdaki ikinci div, konteynerin bu şekilde kaydırma çubuklarının görülebildiği ve kaydırılabildiğinden daha yüksek bir genişliğe sahip. Ve eğer ben kaydırırsam, ilk div genişlemedi, kabın genişliğinde kalır. Ama ilk divun genişlemesini seviyorum. Ben bunu ilk satırın arka plan rengini görebiliyorum. Kaydırmama rağmen bile görülebilir ...

Ve kapsayıcının arka planını kırmızıya ayarlamak mümkün olabileceğini biliyorum, ama başka birinin olup olmadığını bilmek istiyorum. yol.

Yardımlarınız için çok teşekkürler!

cevap

1

Bunu yapmanın bir CSS yolu olduğunu sanmıyorum. Javascript ile hesaplayabilir veya çalışmasını sağlamak için ikinci kapsayıcıyla aynı genişliği kullanabilirsiniz.

See this fiddle

.folder_browser_panel_item_head { 
    background: red repeat; 
    height: 100px; 
    width: 400px; 
} 
+0

Tamam çok teşekkürler, ben benim durumumda ben ilk div etkilenmez böylece ilerleyerek bir çocuk elemana taşma özelliği koymak mümkün olduğumu fark etmiş! Ama yine cevabınız için teşekkürler, şimdi bunun açıkça mümkün değil :-) – whymatter