title: Cannot set height with percentages in React
body: <p>I wanted to build an alarm clock app in react, but i ran into a strange problem.
  I have a container for all Alarm components, and i can't set height for them in percentages.
  Is there any way to pass the height in percentages, instead of px/vh?</p>
  <p><strong>Container</strong></p>
  <pre><code>function Container() {
  return (
      &lt;div className=&quot;container&quot;&gt;
          &lt;Alarm /&gt;
          &lt;Alarm /&gt;
          &lt;Alarm /&gt;
      &lt;/div&gt;
  )
  </code></pre>
  <p>}</p>
  <p><strong>Container Styles</strong></p>
  <pre><code>.container{
    position: absolute;
    top: 7%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    min-height: 60vh;
    display: flex;
    flex-direction: column;
  }
  </code></pre>
  <p><strong>Alarm.js</strong></p>
  <pre><code>function Alarm() {
  
      return (
          &lt;div className=&quot;alarm&quot;&gt;
              quack quack
          &lt;/div&gt;
      )
  }
  </code></pre>
  <p><strong>Alarm Styles</strong></p>
  <pre><code>.alarm{
    width: 100%;
    height: 20%;
  
    &amp;:not(:first-child){
      margin-top: 50px;
    }
  }
  </code></pre>