Flexbox overflow bug

by Jimmy Mabey

HTML

<button onclick="toggle()">
  Toggle width
</button>

<h2>Flexbox</h2>
<div class="flex">
  <div class="container fill">
    <div class="hover">Hover</div>
    <div class="filler"></div>
  </div>
</div>

<h2>No flexbox</h2>
<div class="container scroll">
  <div class="hover">Hover</div>
  <div class="filler"></div>
</div>

CSS

.flex {
  display: flex;
  flex-direction: column;
  height: 250px;
}

.fill {
  flex: 1;
  overflow: auto;
}

.scroll {
  height: 150px;
  overflow: auto;
}

.container {
  background: grey;
  padding: 50px;
  transition: margin 0.5s;
}

.active .fill,
.active .scroll {
  margin-left: 200px;
}

.hover {
  background: red;
}

.hover:hover {
  height: 50px;
}

.filler {
  height: 1000px;
}

JavaScript

window.toggle = function() {
  document.body.classList.toggle("active");
}