Overflow auto in overflow hidden

by Julien Roche

HTML

<section>
  <article>
    <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><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li><li>a</li>
    </ol>
  </article>
</section>

CSS

html, body {
  height: 100%;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  overflow: hidden;
  width: 100%;
}

section {
  background: orange;
  border: 1px solid orange;
  display: flex;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
  width: 500px;
}

article {
  background: white;
  flex: 1 1 auto;
  overflow: auto;
}