Chrome table-row height bug

by Gabriel

HTML

<div class="container">
  <div class="my-component">
    <div class="my-component_top-content">
      Variable content that should fill the container and scroll. Variable content that should fill the container and scroll. Variable content that should fill the container and scroll. Variable content that should fill the container and scroll. Variable content that should fill the container and scroll. Variable content that should fill the container and scroll. Variable content that should fill the container and scroll. Variable content that should fill the container and scroll. Variable content that should fill the container and scroll. Variable content that should fill the container and scroll. Variable content that should fill the container and scroll. Variable content that should fill the container and scroll. Variable content that should fill the container and scroll. Variable content that should fill the container and scroll. Variable content that should fill the container and scroll. Variable content that should fill the container and scroll. Variable content that should fill the container and scroll. Variable content that should fill the container and scroll. Variable content that should fill the container and scroll. Variable content that should fill the container and scroll. Variable content that should fill the container and scroll. Variable content that should fill the container and scroll. Variable content that should fill the container and scroll. Variable content that should fill the container and scroll. Variable content that should fill the container and scroll. Variable content that should fill the container and scroll. Variable content that should fill the container and scroll. Variable content that should fill the container and scroll. Variable content that should fill the container and scroll. Variable content that should fill the container and scroll. Variable content that should fill the container and scroll.
    </div>
    <div...

CSS

.container {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 320px;
}

.my-component {
  display: table;
  height: 100%;
  
  background-color: lightblue;
}

.my-component_top-content {
  display: table-row;
  height: 100%;
  float: left;
  overflow-y: auto;
  
  background-color: green;
}

.my-component_bottom-content {
  display: table-row;
  height: 0;
  
  background-color: orange;
}