Setting parent overflow without breaking position sticky of child

Question

I'm using stickyfill to stickify one of my columns in a two column design. I need my parent to fill vertically without declaring a height. stickyfill detects browsers (firefox, safari) that support position:sticky; and lets those browsers take over.

I'm used to simply setting the parent's overflow to hidden but in this case, it breaks position:sticky; from working.

My solution is to set the parent's display property to table. This works from what I've tested, but I'm wondering if this is a bad idea or if there's a better way to achieve my goal.

Example: JSFiddle

CSS:

.wrapper {
    overflow: visible;
    display: table;
    width: 400px;
}

.left {
    float: left;
    width: 60%;
    height: 1280px;
    background-color: #EEE;
}

.right {
    overflow: hidden;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

HTML:

<div class="wrapper">
    <div class="left">Content</div>
    <div class="right">Sticky</div>
</div>

score 1 · Answer 1 · answered Mar 31 '15 at 00:32

According to your question I am a little unclear on what your overall goal is. But if you are going to set the parent container to display:table then you might as well use the display:table-cell for the children containers and get rid of the float.

.wrapper {
    border-collapse: collapse;
    display: table;
    width: 100%;
}
.right {
    width: 66%;
}
.left {
    width: 44%;
    top: 0;
}

Also I dont know what browsers you want to support but the position:sticky; is not support by some major browsers and I suggest not using until its better supported.

Ah sorry, should've mentioned I'm using [stickyfill](https://github.com/wilddeer/stickyfill) which _turns off_ when it detects a browser with position:sticky; support. — andrgl, Mar 31 '15 at 02:26

score 1 · Answer 2 · answered Jul 19 '17 at 11:14

Actually, overflow: hidden is not breaking the sticky behavior, it just sets this parent container to be the scrolling box for the sticky element.

See the CSS Positioned Layout Module Level 3 W3C Working Draft:

A stickily positioned box is positioned similarly to a relatively positioned box, but the offset is computed with reference to the nearest ancestor with a scrolling box, or the viewport if no ancestor has a scrolling box.

Please see also my response to a similar question.

dippas · Accepted Answer · 2020-01-19T00:09:11.743

-3

I'm not sure what you are trying to achieve but here are a few couple of things that you should know and/or could improve:

overflow:none is invalid, take a look at the possible values for overflow:

/* Content is not clipped */
overflow: visible;

/* Content is clipped, with no scrollbars */
overflow: hidden;

/* Content is clipped, with scrollbars */
overflow: scroll;

/* Let the browser decide */
overflow: auto;

overflow: inherit;

But since you are displaying your parent container as table, then overflow won't work:

The overflow property specifies whether to clip content, render scrollbars or just display content when it overflows its block level container.

Source

last but not least, if you are using display:table in your parent then in your children instead having floats use display:table-cell

Read here info about displaying as tables

EDIT:

So from my tests using your fiddle, and as expected, if you want to keep using display:table, overflow will be obsolete there, as I explained above.

I tested as well setting display:inline-table\table-cell\inline-block and the all worked.

So I don't see disadvantages or advantages to use either one of them.

edited Jan 19 '20 at 00:09

answered Mar 31 '15 at 00:31

dippas

58,591
15
114
126

1

@crazymatt you just missed the overflow property :) but stilI really dunno what OP wants – dippas Mar 31 '15 at 00:34
1

haha you're right. I just removed the overflow since it the scroll or auto doesnt really work with tables. – crazymatt Mar 31 '15 at 00:38
1

yup you're right only works with block elements, I should add this to my answer :) – dippas Mar 31 '15 at 00:41
@dippas Whoops, sorry man, was just writing some _psuedo_ markup and forgot the default value is _visible_. :} I've edited my question accordingly... – andrgl Mar 31 '15 at 02:28
@andrgl your CSS still shows `overflow:none`, can you make a fiddle with the polyfill you are using? – dippas Mar 31 '15 at 22:50
@andrgl edited answer, not sure if this help you, hope it does. – dippas Apr 01 '15 at 00:20

Setting parent overflow without breaking position sticky of child

3 Answers3

EDIT:

Linked