Flex issue when overflow is on parent

use of grid instead

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: -ms-grid;
	display: grid;
  -ms-grid-columns: 1fr 1fr;
	grid-template-columns: 1fr 1fr;
  overflow: auto;
}

.main__core__content__left {
  background-color: yellow;
  border-right: 3px solid blue;
  -ms-grid-column: 1;
}

.main__core__content__right {
  background-color: orange;
  -ms-grid-column: 2;
}