html - 3 columns sticky scroll behaviour with absolute element inside

Question

I'm trying to handle 3 columns, each of one with independent scroll. The first column has a absolute element which should overflow on x axis but overflow-x:visible is not working combined with overflow-y: auto

Can you help me?

.container {
  display: flex;
}

.column2 {
  width: 60%;
  background-color: #bababa;
  height: 5000px;
}

.side-column {
  width: 20%;
  background-color: #eeeeee;
  height: 100vh;
  position: sticky;
  top: 0;
  overflow-y: auto;
  overflow-x: visible;
}

.side-content {
  width: 100%;
  height: 3000px;
}

.picker {
  position: absolute;
  top: 25px;
  left: 25px;
  height: 300px;
  width: 300px;
  background-color: #f00;
}

.column3 {
  height: 100px;
}

<div class="container">
  <div class="side-column">
    <div class="side-content">
      column1
      <div class="picker"></div>
    </div>
  </div>
  <div class="column2">
    content
  </div>
  <div class="side-column column3">
    <div class="side-content">
      column3
    </div>
  </div>
</div>

question from:https://stackoverflow.com/questions/65843359/3-columns-sticky-scroll-behaviour-with-absolute-element-inside

Answer 1

Try to avoid unused boxes...

The overflow: auto; only works when the inner content has more width or height than the container. If so it will add scroll-bar automatically.

what about this code... HTML

<div class="container">
    <div class="column1">
      
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum aperiam, repellendus sequi debitis dolorum illo hic sed, cumque voluptatibus magnam sint architecto ullam laboriosam ipsa molestias culpa ab possimus soluta nobis omnis? Ab praesentium consectetur, est laborum voluptatem vitae, accusantium cum odio voluptates consequatur mollitia maxime assumenda sapiente dignissimos quo quis? Sit nulla esse deleniti odio asperiores perspiciatis, autem animi impedit quasi laborum minus labore natus delectus quaerat dolorem. Soluta tempora animi id quo recusandae nulla, cupiditate itaque voluptatem odit. Veritatis nemo quos temporibus soluta voluptas, quae facilis vel laboriosam labore. Debitis illo, harum fugiat quo laboriosam tenetur mollitia perspiciatis.
        </p>
        
      
    </div>
    <div class="column2">
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum aperiam, repellendus sequi debitis dolorum illo hic sed, cumque voluptatibus magnam sint architecto ullam laboriosam ipsa molestias culpa ab possimus soluta nobis omnis? Ab praesentium consectetur, est laborum voluptatem vitae, accusantium cum odio voluptates consequatur mollitia maxime assumenda sapiente dignissimos quo quis? Sit nulla esse deleniti odio asperiores perspiciatis, autem animi impedit quasi laborum minus labore natus delectus quaerat dolorem. Soluta tempora animi id quo recusandae nulla, cupiditate itaque voluptatem odit. Veritatis nemo quos temporibus soluta voluptas, quae facilis vel laboriosam labore. Debitis illo, harum fugiat quo laboriosam tenetur mollitia perspiciatis.
        </p>
    </div>
    <div class="column3">
     
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum aperiam, repellendus sequi debitis dolorum illo hic sed, cumque voluptatibus magnam sint architecto ullam laboriosam ipsa molestias culpa ab possimus soluta nobis omnis? Ab praesentium consectetur, est laborum voluptatem vitae, accusantium cum odio voluptates consequatur mollitia maxime assumenda sapiente dignissimos quo quis? Sit nulla esse deleniti odio asperiores perspiciatis, autem animi impedit quasi laborum minus labore natus delectus quaerat dolorem. Soluta tempora animi id quo recusandae nulla, cupiditate itaque voluptatem odit. Veritatis nemo quos temporibus soluta voluptas, quae facilis vel laboriosam labore. Debitis illo, harum fugiat quo laboriosam tenetur mollitia perspiciatis.
        </p>
      
    </div>
</div>

CSS

.container{
    display: flex;
}


.column1{
    width: 20%;
    height: 300px;
    background-color: rgb(211, 210, 210);
    overflow: auto;
}

.column2{
    width: 60%;
    height: 300px;
    background-color: rgb(255, 255, 255);
    overflow: auto;
}


.column3{
    width: 20%;
    height: 300px;
    background-color: rgb(211, 210, 210);
    overflow: auto;
}

Output

It will add a scroll bar automatically where needed. But if you want scroll bar in a specific side just change overflow: auto; to either overflow-y: auto; or overflow-x: auto;.

Do not make it as overflow: scroll; because it will always add a scroll bar whether it is scrollable or not. So avoid using this