Flex issue when overflow is on parent

Use of height: min-height to resolve it See: https://stackoverflow.com/questions/21515042/scrolling-a-flexbox-with-overflowing-content https://developer.mozilla.org/en-US/docs/Web/CSS/height https://caniuse.com/#feat=mdn-css_properties_height_min-content

by Julien Roche

HTML

<body class="main">
  <div class="main__core">
    <header class="main__core__header"></header>
    <section class="main__core__content">
      <aside class="main__core__content__left">
      <div>All left</div>
        <ol>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
      </ol>
      </aside>
      <aside class="main__core__content__right">
      <div>All right</div>
      <ol>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
      </ol>
      </aside>
    </section>
  </div>
</body>

CSS

html,
body {
  border: none;
  height: 100%;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  width: 100%;
}

.main {
  display: flex;
  align-items: center;
  justify-content: center;
}

.main__core {
  background-color: red;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  height: 50vh;
  width: 50vw;
}

.main__core__header {
  background-color: purple;
  flex: 0 0 auto;
  height: 5vh;
}

.main__core__content {
  background-color: green;
  display: flex;
  flex: 1 1 auto;
  overflow: auto;
}

.main__core__content__left {
  background-color: yellow;
  border-right: 3px solid blue;
  flex: 1 1 0px;
  height: min-content;
}

.main__core__content__right {
  background-color: orange;
  flex: 1 1 0px;
  height: min-content;
}