Learn Creating a Sub-Content with Scroll

Hello everyone this is my first blog. Today I would like to share my experience while develop my personal project. In my project I want to make a sub-content that have a scroll bar but the height of that content is 100% to the remaining parent height space. The parent height here is depend on the viewport size.

After a while searching about the solution I have discover to make the sub-content fill the remaining parent height space we could use flex-box and change the flex direction to column. One problem is solved.

My next problem is how to make only the sub-content have the scroll bar and the parent (body) doesn't. Then finally I got the solution after learning about overflow. What is new that I learn here is if we have our sub-content wrapping by a div for the container, we have to set both of the container and the grand-child of our body to have overflow value.

And that it's my sub-content know have scroll auto and the height is depend on the remaining it parent height.

Here is the html code:

<div class="container">
  <div class="box-container">
    <div class="box">
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
    </div>
  </div>  
</div>

And following css:

.container {
  box-sizing: border-box;
  height: 100vh;
  background-color: #f5f5f5;
  border: 2px solid red;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.box-container {
  overflow-y: auto;
  display: flex;
}

.box {
  overflow-y: auto;
  flex:1;
  height:auto;
  background-color: yellow;
}

.list {
  height: 200px;
  border: 2px solid green;
  margin-bottom: 2px;
}

Thanks for reading and sorry for my bad english. Keep it up for those who are finding problems in coding 💪