overflow: hidden not working on an inner element?

Question

In the below example the overflow: hidden of the inner element has no effect (JSFiddle example). The parent elements of the canvas do grow with it and a scrollbar becomes visible. But when I move overflow: hidden to the outer element the inner element behaves like it has the overflow: hidden style by retaining the size of the outer element without showing scrollbars (JSFiddle example). Why does the overflow: hidden work on the outer but not on the inner?

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

.container {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr;
}

.outer {
  background-color: green;
}

.inner {
  background-color: blue;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.canvas {
  width: 4000px;
  height: 100px;
}

<div class="container">
  <div class="outer">
    <div class="inner">
      <canvas class="canvas"></canvas>
    </div>
  </div>
  <div class="outer">
    <div class="inner">
      <canvas class="canvas"></canvas>
    </div>
  </div>
</div>