vertical scrollbar not showing in flexbox children

Issue

I want the top panel to have no scrollbars and the two bottom panels to have both horizontal and vertical scrollbars.

The horizontal scrollbars for the bottom panels do not work.

If I delete the top div, the scrollbars behave just fine.

<style>
  * {
    font-size: 200px;
  }

  html,body {
    height: 100%;
    width: 100%;
    margin: 0;
    overflow: hidden;
  }
  .splitter {
    display: flex;
    overflow: hidden;
    height: 100%;
    width: 100%;
  }
  .left {
    background-color: bisque;
    overflow: scroll;
  }
  .right {
    background-color: rgb(67, 228, 62);
    overflow: scroll;
  }
  .top {
    background-color: red;
  }
</style>
<div class="top">
  top
</div>
<div class="splitter">
  <div class="left">
    this is panel 1
  </div>
  <div class="right">
    this is panel 2
  </div>
</div>

Solution

This is how I managed to get it working, you might be able to tweak it to your liking. I think this type of layout in isolation is terrible as it's not responsive to the content/device.

* {
  font-size: 200px;
  box-sizing: border-box;
}

html,
body {
  max-height: 100%;
}

body {
  display: flex;
  flex-flow: column nowrap;
  margin: 0;
}

.splitter {
  max-height: 90vh;
  flex: 50% 1 1;
  display: flex;
  overflow: hidden;
}

.left,
.right {
  overflow: scroll;
}

.left {
  background-color: bisque;
}

.right {
  background-color: rgb(67, 228, 62);
}

.top {
  background-color: red;
  flex: 50% 1 1;
}

<div class="top">
  top
</div>
<div class="splitter">
  <div class="left">
    this is panel 1
  </div>
  <div class="right">
    this is panel 2
  </div>
</div>

Answered By - Zach Jensz