Flexbox animated expand element

Flexbox animated expand element

HTML

<div id="flexbox">
  <div class="flexed expand-me"></div>
  <div class="flexed expand-me"></div>
  <div class="flexed expand-me"></div>
  <div class="flexed expand-me"></div>
  <div class="flexed expand-me"></div>
  <div class="flexed expand-me"></div>
  <div class="flexed expand-me"></div>
  <div class="flexed expand-me"></div>
  
</div>

CSS

#flexbox {
  display: flex;
  flex-flow: row;
}

.flexed {
  border: 1px solid black;
  height: 100px;
  flex: 1 0 auto;
  transition: flex 250ms linear;
}

.expanded {
  flex: 2 0 auto;
}

JavaScript

var node = Array.from(document.querySelectorAll('.expand-me'));

node.forEach(x => x.addEventListener('mouseenter', function(evt) {
  this.classList.add('expanded');
}, false));

node.forEach(x => x.addEventListener('mouseleave', function(evt) {
  this.classList.remove('expanded');
}, false));