Setting parent overflow without breaking position sticky of child [duplicate]

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>

Answer 1

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.

Answer 2

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.