title: Can't set height to 100% on flex child
body: <p>I have a fairly straight forward layout in mind, and this involves my body (essentially the content of the page after header) being at least 100% height. This works fine on desktop breakpoints, but as soon as I switch to a mobile breakpoint (which sets container to flex-direction to column), I can't seem to make the body element 100% height. I've tried using 100vh, and it works, but then screws up the layout of the desktop view. Every parent of this body element has a height bigger than it/100%.</p>
  
  <p>I am using flexbox, styled-components, and React.</p>
  
  <p>Any ideas? Thanks!</p>
  
  <p>Body CSS:</p>
  
  <pre><code>  font-family: 'FuturaBold';
    box-sizing:border-box;
    color: black;
  
    height: 100%;
  
    display: flex;
    flex-direction: column;
  
    @media (max-width: ${Breakpoints.tablet}) {
      padding-top: 50px;
    }
  </code></pre>
  
  <p>Parent CSS:</p>
  
  <pre><code>  min-height: 100% !important;
    box-sizing: border-box;
  
    background-color: ${Colours.dark};
  
    display: flex;
  
    @media (max-width: ${Breakpoints.tablet}) {
      flex-direction: column;
    }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/tHSL4.png" rel="nofollow noreferrer">Picture here</a></p>