title: How to prevent <v-responsive> from growing with content?
body: <p>In my Vue.js application (with vuetify) I want a v-sheet with (√2)/2 aspect ratio (width/height = (√2)/2).
  In this v-sheet, I have some content that can grow but I don't want the v-sheet to grow with its content.
  According to vuetify documentation, aspect-ratio :
  "Sets a base aspect ratio, calculated as width/height. This will only set a minimum height, the component can still grow if it has a lot of content."</p>
  
  <p>I did some tests with codepen and came up with this POC (working better with chrome, firefox does not always respect the ratio but thats another issue) : <a href="https://codepen.io/Achaaab/pen/zYOpmbJ" rel="nofollow noreferrer">https://codepen.io/Achaaab/pen/zYOpmbJ</a>.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;v-app id="app"&gt;
    &lt;v-content fill-height&gt;
      &lt;v-container fill-height fluid&gt;
        &lt;v-row&gt;
          &lt;v-col cols="6"&gt;
            &lt;v-sheet tile elevation="4"&gt;
              &lt;v-responsive aspect-ratio="0.707"&gt;
                &lt;div class="sheet-content"&gt;
                  &lt;div class="header"&gt;&lt;/div&gt;
                  &lt;v-textarea class="body" auto-grow hide-details&gt;&lt;/v-textarea&gt;
                  &lt;div class="filler"&gt;&lt;/div&gt;
                  &lt;div class="footer"&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/v-responsive&gt;
            &lt;/v-sheet&gt;
          &lt;/v-col&gt;
          &lt;v-col cols="6"&gt;
            &lt;v-sheet tile elevation="4"&gt;
              &lt;v-responsive aspect-ratio="0.707"&gt;
                &lt;div class="sheet-content"&gt;
                  &lt;div class="header"&gt;&lt;/div&gt;
                  &lt;div class="body" :style="bodyStyle"&gt;&lt;/div&gt;
                  &lt;div class="filler"&gt;&lt;/div&gt;
                  &lt;div class="footer"&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/v-responsive&gt;
            &lt;/v-sheet&gt;
            &lt;v-slider v-model="height" min="0" max="150" label="body height %"&gt;&lt;/v-slider&gt;
          &lt;/v-col&gt;
        &lt;/v-row&gt;
      &lt;/v-container&gt;
    &lt;/v-content&gt;
  &lt;/v-app&gt;
  </code></pre>
  
  <pre><code>new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data() {
      return {
        height: 20
      }
    },
    computed: {
      bodyStyle() {
        return "height: " + this.height + "% !important";
      }
    }
  })
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>.sheet-content {
    height: 100%;
    padding: 8px;
    display: flex;
    flex-direction: column;
  }
  .sheet-content &gt; .header {
    width: 100%;
    height: 10%;
    background-color: #C0C0C0;
    flex: 0 0 auto;
  }
  .sheet-content &gt; .body {
    width: 100%;
    margin: 0px;
    padding: 0px;
    background-color: #E0E0E0;
    flex: 0 0 auto;
  }
  .sheet-content &gt; .filler {
    width: 100%;
    flex: 1 0 auto;
  }
  .sheet-content &gt; .footer {
    width: 100%;
    height: 10%;
    background-color: #C0C0C0;
    flex: 0 0 auto;
  }
  </code></pre>
  
  <p>I made 2 sheets, the left one contains a v-text-area that can grow.
  The right one contains a div that can grow up to 150% with a slider.</p>
  
  <p>Surprisingly, the right sheet does not grow with content.
  According to vuetify documentation, the left sheet grows with content.</p>
  
  <p>How can I have the same behavior on the left sheet ? (some kind of overflow: hidden).</p>