How to make a child divs wider than the scrollable parent

Question

I am trying to make a child div overflowing the parent div. But the parent div needs to be scrollable.

See here: https://jsfiddle.net/20o4uysj/2/

.container {
  width: 200px;
  border: 1px solid #d8d8d8;
  border-radius: 6px;
  height: 250px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px;
}

.extended {
  background: #f7f7f7;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  padding: 10px;
  width: 400px;
}

This is what I am trying to get:

It seems to be a though mission. Haven't found any solution for this issue.

I don't think you can get exactly that (where the parent div keeps the same width throughout) using only HTML/CSS. Is a bit of Javascript acceptable? — A Haworth, Jan 13 '22 at 15:44

jeremy-denis · Answer 1 · 2022-01-13T11:16:55.113

0

unfortunately like your container have an overflow-y : auto it's not possible

the spec implementation don't allow to have an overflow-x visible in addition to an overflow-y auto or scroll

see more details here CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

edited Jan 13 '22 at 11:16

answered Jan 13 '22 at 11:07

jeremy-denis

6,368
3
18
35

score 0 · Answer 2 · answered Jan 13 '22 at 22:32

If you want to use the normal flow then the answer of jeremy-denis is correct.

But you'll see that when you add a position: absolute; at your extended class that it will create the look you want. It allows for the element to flow outside of it's parent because it's taken out of the regular flow. Of course this means the rest of the flow of the other elements along with their positions get messed up as well.

Then that problem you could fix with Javascript but it will probably be a pain in the butt!

How to make a child divs wider than the scrollable parent

2 Answers2