CODEWITHSUNDEEP
htmlcssoverflow
whymatter
whymatter

Reputation: 775

Make children expand to parent's width when overflow is set to scroll

I have the following problem:

Here a link to JsFiddle

And here the sources again:

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

here you can see a container div, containing 2 other divs. The container itself has the overflow property set to scroll. The second div in this container has a higher width that the container so scrollbars are visible and I am able to scroll. And if I scroll, the first div didn´t expand, it remains on the width of the container. But I like the first div to expand. I like that the background color of the first div can be seen even if I scroll...

And I know it would be possible to set the background of the container to red, but I like to know whether there is another way.

Thanks a lot for your help!

Upvotes: 1

Views: 540

Answers (1)

Nutshell
Nutshell

Reputation: 8537

I don't think there's a CSS way to do that. You can calculate it with Javascript or use the same width as the second container to make it works.

See this fiddle

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

Upvotes: 1

Related Questions