Twitter like scroll behaviour. Scroll main content from anywhere in the page

Question

I am stuck on this CSS / HTML layout and scroll problem.

My end goal is to have a website layout very similar to Twitter's main home page (Desktop).

They basically have 2 side bars and a main content div between them. The two side panels are fixed and do not scroll as the user scrolls the page. The main content is arbitrarily large, and is scrollable. However, the part I don't understand is that the main div scrolls, even if I scroll my mouse outside of it.

Even when scrolling over the NAVBAR / SIDEBAR or the Grey background, the main div will scroll. Also the browser scrollbar is all the way on the right of the window, instead of within the main content div.

Currently I have the Green sidebar, Blue content and purple sidebar divs all in a horizontal flex-box container.

Basically My question is how can I layout my page so that it has a similar scrolling and layout behavior to twitter's home page on desktop.

Thank You :)

Answer 1

Something like this?

.sidebar {
  width: 25%;
  height: 25vh;
  min-height: 200px;
  overflow: auto;
  position: sticky;
  top: 5%;
}

.main {
  width: 60%;
  height: 200vh;
  min-height: 1000px;
  display: flex;
  flex-direction: column;
}

.main,
.sidebar {
  border: 5px solid #222;
  background-color: white;
  border-radius: 10px;
  color: #222;
  padding: 15px;
  margin: 10px;
}

.wrapper {
  display: flex;
  justify-content: space-between;
}

body {
  padding: 3%;
  background-color: #ccc;
  font-size: 20px;
  box-sizing: border-box;
  font-family: Lato, sans-serif;
}

code, pre {
  background-color: #ccc;
  padding: 0 3px;
  border-radius: 5px;
}

.bottom {
  justify-self: bottom;
}

<div class="wrapper">
   <div class="sidebar">
    <h3>Sticky sidebar</h3>
    
    
  </div>
  <div class="main">
    <h2>Main content</h2>
    <p>Scroll down the page!</p>

    
  </div>

  <div class="sidebar">
    <h3>Sticky sidebar</h3>
   
  
  </div>
</div>