title: vue app will not grow to 100% height on media query
body: <p>Hi all I am using my vue router for a few pages, and my main container on the page will not set the height to 100% using this media query</p>
  <pre><code>@media screen and (min-width: 700px) {
    #signinContainer {
      height: 100%;
    }
    #signinContainer {
    height: 520px;
    }
    #mainContainer{
      height: 100%;
    }
  }
  </code></pre>
  <p>I have tried making the router component 100% height as well as the app itself but this doesn't work, I want to avoid just making it 700px because I want it to dynamically grow and shrink as needed</p>
  <p>hopefully someone can see what I'm doing wrong. I had the same issue with width before and changing the div width in the view fixed it but that isn't the case with the height from what I've tried so far</p>
  <p>here's an image of the issue</p>
  <p><a href="https://i.stack.imgur.com/3E3Jz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3E3Jz.png" alt="enter image description here" /></a></p>
  <p>here is my component</p>
  <pre><code>&lt;template&gt;
    &lt;div id=&quot;mainContainer&quot;&gt;
      &lt;div class=&quot;topContainer&quot;&gt;
        &lt;img src=&quot;../assets/svg/logo_big.svg&quot; height=&quot;45px&quot; width=&quot;110&quot; alt=&quot;flyex logo&quot;&gt;
        &lt;section&gt;
        &lt;h6 id=&quot;signup&quot; @click=&quot;signupRoute&quot;&gt;Sign Up&lt;/h6&gt;
        &lt;h6 id=&quot;language&quot;&gt;English &lt;small id=&quot;dropDownArrow&quot;&gt;&amp;#x25BC;&lt;/small&gt;&lt;/h6&gt;
        &lt;/section&gt;
      &lt;/div&gt;
  
      &lt;div id=&quot;signinContainer&quot;&gt;
        &lt;form @submit.prevent=&quot;handleSubmit&quot;&gt;
          &lt;h4&gt;Sign In&lt;/h4&gt;
          &lt;input type=&quot;email&quot; v-model=&quot;email&quot; placeholder=&quot;  Email&quot; /&gt;
          &lt;input type=&quot;password&quot; v-model=&quot;password&quot; placeholder=&quot;  Password&quot; /&gt;
          &lt;div id=&quot;formButton&quot;&gt;
          &lt;button&gt;Sign In&lt;/button&gt;
          &lt;/div&gt;
        &lt;/form&gt;
  
          &lt;h6&gt;OR&lt;/h6&gt;
          &lt;div id=&quot;socials&quot;&gt;
            &lt;img src=&quot;../assets/general/ic-social@2x.png&quot; height=&quot;50px&quot; width=&quot;50&quot; alt=&quot;facebook&quot;&gt;
            &lt;img src=&quot;../assets/general/ic-social-1@2x.png&quot; height=&quot;50px&quot; width=&quot;50&quot; alt=&quot;google&quot;&gt;
            &lt;img src=&quot;../assets/general/ic-social-2@2x.png&quot; height=&quot;50px&quot; width=&quot;50&quot; alt=&quot;twitter&quot;&gt;
          &lt;/div&gt;
  
          &lt;div class=&quot;links&quot;&gt;
            &lt;a signupRoute&gt;CREATE ACCOUNT?&lt;/a&gt;
            &lt;a&gt;NEED HELP?&lt;/a&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
    
  
  &lt;style scoped&gt;
  
  #mainContainer{
    font-family: 'Noto Sans JP', sans-serif;
    background-image: linear-gradient(#2C93EF, #389EF9);
    width: 100%;
    height: 100%;
    padding: 2em;
  }
  
  .topContainer{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 1em 0 1em 0;
    
  }
  section{
    display:flex;
  }
  section h6{
    color: white;
  }
  
  #signinContainer{
    display: block;
    margin: 0 auto;
    margin-bottom: .5em;
    justify-content: center;
    border-radius: 8px;
    width: 28%;
    height: 470px;
    background-color: white;
    box-shadow: 0 1px 2px #888888fa;
  }
  #signup:hover{
  cursor:pointer;
  }
  #language{
  padding-left:1.5em;
  color: white;
  }
  
  #dropDownArrow{
    color: white;
  }
  h4{
    font-size: 27px;
    padding-bottom: 1.5em;
  }
  h6{
    font-size: 16px;
    color:rgba(128, 128, 128, 0.39);
  }
  form{
    padding-top: 10%;
    display: block;
    justify-content: center;
    width: 100%;
    margin-bottom: 1.5em;
  
  }
  
  input{
    margin: .5em;
    height: 35px;
    width: 80%;
    border-radius: 5px;
    border: .5px solid rgba(128, 128, 128, 0.199);
  }
  ::placeholder {
    color:rgba(128, 128, 128, 0.445);
  }
  #formButton{
    width: 100%;
  }
  button{
    margin-top: 1.5em;
    background-color:rgb(71, 174, 243);
    color: white;
    border: none;
    border-radius: 10px;
    height: 40px;
    width: 80%;
  }
  button:hover{
    background-color: #389EF9;
  }
  
  #socials{
    margin-bottom: 1em;
  }
  #socials img{
    margin: 1em;
  }
  .links{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: 12px;
    color:rgb(71, 174, 243)
  }
  .links a{
    margin: 1.5em;
  }
  .links a:hover{
    cursor: pointer;
  }
  
  // change height of main container to be 100% of the screen and set the sign in container to a larger size
  @media screen and (min-width: 700px) {
    #signinContainer {
      height: 100%;
    }
    #signinContainer {
    height: 520px;
    }
    #mainContainer{
      height: 100%;
    }
  }
  
  
  
  &lt;/style&gt;
  
  </code></pre>
  <p>here is my view where I render the component</p>
  <pre><code>&lt;template&gt;
      &lt;div&gt;
      &lt;Signin/&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  // @ is an alias to /src
  import Signin from '@/components/Signin.vue'
  
  export default {
    name: 'signin',
    components: {
      Signin
    }
  }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  
  div{
    width: 100%;
    height: 100%;
  }
  
  
  &lt;/style&gt;
  </code></pre>
  <p>here is my app file where I have the main router</p>
  <pre><code>&lt;template&gt;
    &lt;div id=&quot;app&quot;&gt;
    
  
      &lt;router-view id=&quot;router&quot;/&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;style lang=&quot;scss&quot; scoped&gt;
  @import '../sass/main.scss';
  
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  height: 100%
    
  }
  #router{
    z-index: 0;
    width: 100%;
    height: 100%;
  }
  
  #nav {
    padding: 30px;
  }
  
  #app div{
    width: 100%;
  }
  
  
  #nav a {
    font-weight: bold;
    color: #2c3e50;
  }
  
  #nav a.router-link-exact-active {
    color: #42b983;
  }
  &lt;/style&gt;
  
  </code></pre>