CODEWITHSUNDEEP
htmlcsscss-position
karthikaruna
karthikaruna

Reputation: 3236

CSS: absolute positioned element causes scroll

In THIS scenario, I don't want the last .child's .hang to add up to the height and incur additional scroll. I want it to protrude outside .parent instead, on scroll.

How can I achieve this?

Upvotes: 1

Views: 78

Answers (2)

Michael Davis
Michael Davis

Reputation: 11

If you want the parent to stay the size you have it, but you want the last child to have a smaller hang, you can use the css pseudo-class selector :last-child.

It sounds like you want to change the overflow-y of the child class that is the last child of its parent. If you change it to :hidden, it should do what you are expecting.

.child:last-child {
    overflow-y: hidden;
}

See this JS-Bin for an example.

EDIT

In response to the modification of the question, I see that you want to have the .hang protrude outside of the .parent object. If I'm understanding your desired look correctly, you have a .hang as a child of .child, which itself is a child of .parent, and you want the overhang from .hang to protrude outside of the outer .parent object.

Unfortunately, I do not believe this exact behavior is possible. Once you use overflow-y: scroll, then any part of any child that extends beyond the bounds of the container is truncated, and you have to scroll it into view.

Upvotes: 1

emmzee
emmzee

Reputation: 640

If I understand what you want, you can change:

overflow-y: scroll;

to:

overflow-y: visible;

That'll flow the .hangs ouside the .parent without a scrollbar.

Upvotes: 0

Related Questions