<!DOCTYPE html>

<style>
body {
  height: 200vh;
}

section {
    height: 400px;
    display: flex;
    flex-direction: column;
}

.side-menu {
    border: 1px solid black;
    width: 200px;
    display: flex;
    flex-direction: column;
}

.box-body {
    height: 1000px;
    flex: 1 1 0%;
    display: flex;
    min-height: 0px;
}

.list {
    list-style: none;
    padding: 0;
    overflow: auto;
    flex: 1 1 0;
}

li {
    height: 20px;
    background-color: red;
}
</style>

<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/check-layout-th.js"></script>
<body onload="checkLayout('section')">

<div id=log></div>

<section>
  <div class="box-body">
    <div class="side-menu">
      <ul class="list">
        <li data-expected-width="200">
        </li>
      </ul>
    </div>
    <div style="height: 1000px;"></div>
  </div>
</section>