Split screen containers with scrolling

Question

I'm looking to create a web page in html/css that will split the width of the screen in 2, will keep the height at 100% with enabled scrolling, will always keep it that way, and which will have overflow content that will scroll horizontally and vertically. The image below shows a basic diagram of what I want to do:

Answer 1

You can use flex to wrap div to set them side by side and style box as below:

.wrap{display:flex;}
.box{
height: 100vh;
    width: 50vw;
    background-color: blue;
    overflow: scroll;
}

<div class="wrap">
  <div class="box">

  </div>
  <div class="box">

  </div>
</div>

You can use inline-block

.box{
  display:inline-block;
  height: 100vh;
   width: 49%;
    background-color: blue;
    overflow: scroll;
}

<div class="box">
</div>
<div class="box">
</div>