title: How to make grid element 100% available height in flex column parent?
body: <p>I have this html structure:</p>
  <p><a href="https://i.stack.imgur.com/fy5Yz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fy5Yz.png" alt="enter image description here" /></a></p>
  <p>I want to make .SceneWithHistory-Container to have 100% of available height in parent. Here is my css:</p>
  <pre><code>.Module-Container
    margin-top: 120px
    display: flex
    flex-direction: column
    height: 300px
  
  .Funnel-Container
    display: grid
    grid-template-columns: 1fr
    grid-gap: 16px
  
  .SceneWithHistory-Container
    position: relative
    display: grid
    grid-template-columns: minmax(450px, 532px) 1fr
    margin-left: -16px
    width: calc(100% + 32px)
    flex: 1
  
  .Module-SubmitFormButtons
    background: #fff
    height: 64px
    bottom: 0
    width: calc(100% + 32px)
    margin-left: -16px
    padding: 0px 16px
    border-top: 0
    box-shadow: var(--whiteBoxShadow)
    display: flex
    align-items: center
    margin-top: 0 !important
    flex-shrink: 0
  </code></pre>
  <p>I'v tried to make <code>SceneWithHistory-Container flex: 1</code>, but i'ts not getting 100% of available height. If my container <code>.Moudule-Container</code> has 300px of height, i want to make <code>.SceneWithHistory-Container 300px - height of Funnel-Container and - Module-SubmitFormButtons.</code></p>
  <p>Please don't ask me to add <code>height: calc()</code> prop, because i want to have dynamic calculation in my parent, that's not depend of children</p>