Is it possible to over-ride 'overflow: hidden' parents with 'position: sticky'?

Question

I have a two column layout where I want the right column to be position: sticky so it stays in view while scrolling the longer left column.

These are two b

Answer 1

As you already noticed any overflow property between the sticky position and the scroll will break it (explained here: Why is 'position: sticky' not working with Core UI's Bootstrap CSS and here What are `scrolling boxes`?).

One workaround in your case is to move the scroll to another element and hide the default one:

.theproblem {
  overflow-x: hidden;
}
/* Added this */
.columnwrapper {
  height:100vh;
  overflow:auto;
}
body {
  overflow:hidden;
  margin:0;
}
/**/

.column {
  display: inline-block;
  width: 45%;
  vertical-align: top;
}

.column1 {
  border: 1px solid red;
  height: 1000px;
}

.column2 {
  border: 1px solid green;
  position: sticky;
  top: 1px;
}

<div class="theproblem">
  <div class="columnwrapper">
    <div class="column column1">
      This is column 1 (the tall one)
    </div>
    <div class="column column2">
      This is column 2 (the sticky one)
    </div>
  </div>
</div>