Chrome table height bug

by Gabriel

HTML

<div class="container">
  <div class="left">
    Left content<br>Left content<br>Left content<br>Left content<br>Left content
  </div>
  <div class="right">
    <div class="right_content">
      Right content<br>Right content<br>Right content<br>Right content<br>Right content<br>Right content<br>Right content<br>Right content<br>Right content<br>Right content
    </div>
  </div>
</div>

CSS

.container {
  display: table;
  width: 100%;
}

.left {
  display: table-cell;
  
  background-color: green;
}

.right {
  display: table-cell;
  height: 100%;
  
  background-color: lightblue;
}

.right_content {
  height: 100%;
  overflow-y: auto;
}