Machen Sie Ihre Kinder zu Eltern Breite erweitern, wenn Überlauf gesetzt

Question

ich blättern habe folgendes Problem:

Here a link to JsFiddle

Und hier die Quellen wieder:

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

hier können Sie einen Container div sehen , enthält 2 andere Divs. Für den Container selbst ist die Überlaufeigenschaft zum Blättern festgelegt. Das zweite div in diesem Container hat eine höhere Breite als der Container, so dass Bildlaufleisten sichtbar sind und ich blättern kann. Und wenn ich scrollte, dehnte sich das erste Div nicht aus, es bleibt auf der Breite des Containers. Aber ich mag das erste Div zu erweitern. Ich mag, dass die Hintergrundfarbe des ersten Div gesehen werden kann, selbst wenn ich scrollte ...

Und ich weiß, es wäre möglich, den Hintergrund des Containers auf rot zu setzen, aber ich möchte wissen, ob es ein anderes gibt Weg.

Vielen Dank für Ihre Hilfe!

Answer 1

Ich glaube nicht, dass es eine CSS-Möglichkeit gibt, das zu tun. Sie können es mit Javascript berechnen oder verwenden Sie die gleiche Breite wie der zweite Container, damit es funktioniert.

See this fiddle

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