Chrome flexbox bug

https://crbug.com/828903

by Tomek

HTML

<ol>
  <li>You should see a green background of the inline container</li>
  <li><button>click me</button> - indigo rectangle should addapt to container's height</li>
  <li>resize the browser window</li>
</ol>
<div class="wrapper">
  <div id="container">
    <svg viewBox="0 0 5 4">
      <rect x="10%" y="10%" width="80%" height="80%" />
    </svg>
  </div>
</div>

CSS

div.wrapper {
  height: 250px;
}

#container {
  display: inline-flex;
  justify-content: center;
  height: 100px;
  margin: 1em;
  background-color: green;
  
  position: relative;
}

#container.enlarged {
  height: 200px;
}

svg {
  /* 
   https://crbug.com/828903
   This fixes the sizing, but preaks inline element 
  */
  /* position: absolute; */
  margin: 1em;
  background: lightSkyBlue;
  height: calc(100% - 2em);
  fill: indigo;
}

JavaScript

document.querySelector('button').addEventListener('click', function () {
    container.classList.toggle('enlarged');
});