text not fitting inside flexbox on mobile

Question

On the snippet it looks pretty fine, but when I do this on my browser it doesn't work at all. When you resize the browser window to 500px or under, the text in the middle and right row are out of the container div I have, even though the container div's height is 100%, and I'm not too sure why the height is not increasing so as to fit the text in the middle and right 'row'. Below is the image, but notice the text is outside of the entire container. One last thing is I can't understand why the images are on different rows even though the flex basis for left is 100%. Both images should be in left and wouldn't that mean they'd be in the same row? I know on the image they're huge, but I just made them 80 pixels and I'm experiencing the same problem. It's as if the media query isn't working or something. I'm ultimately after a mobile version with three rows. First row has the two pictures, last two rows would just be text, and I'm looking for the middle column to be twice the height of the others, which is why I made it's flex grow 2.

* {
    margin: 0;
}

html,
body {
    height: 100%;
    background-color: green;
}



#bigwrap {
    position: relative;
    height: 100%;
}

.container {
    display: flex;
    //position: absolute;
    position: relative;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    height: 70%;
    width: 70%;
    margin: auto;
   // top: 40%;
    //left: 50%;
   // transform: translate(-50%, -50%);  /* http://stackoverflow.com/q/36817249/3597276 */
    background-color: white;
}

.left, .middle, .right{
    border-right: 1px solid blue;
}







.left {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: space-around;
    order: 1;
    //background: red;
    flex: 1 20%;
    height: 100%;
}

.left img {
    max-width: 100%;
}

.middle {
    display: flex;
    flex-flow: column wrap;
    order: 2;
   // background: green;
    flex: 2 20%;
    height: 100%;
}

.right {
    text-align: center;
    order: 3;
    //background: yellow;
    flex: 1 20%;
    height: 100%;
}

.right .headbox{
    border-bottom: 1px solid orange;
    margin: auto;
    width: 60%;
    height: auto;
}

.right .list{
    text-align: center;
    margin: auto;
    width: 60%;
    height: auto;
}

.list ul{
    list-style: none;
    padding: 0;
}

.list a{
    text-decoration: none;
    color: inherit;
}

.headbox h3{
    color: orange;
}


/*
@media screen and (min-width: 600px) {
    .container {
        flex-wrap: nowrap;
    }
    .left {
        flex-basis: 20%;
        flex-grow: 1;
        order: 1;
    }
    .middle {
        flex-basis: 20%;
        flex-grow: 2;
        order: 2;
    }
    .right {
        flex-basis: 20%;
        flex-grow: 1;
        order: 3;
    }
}

*/

@media all and (max-width: 500px) {

  .container {
    flex-flow: row wrap;
    height: 100%;
    
  }
  .left img {

    height: 80px;
    width: 80px;

  }

  .left, .right, .middle {
    flex: 1 100%;
  }

}

    <div id="bigwrap">


   
       <div class="container">
        <div class="left">
            <img src="cat1.jpeg" alt="Picture of kid">
             <img src="cat1.jpeg" alt="Picture of kid">
            
           
        </div>
        <div class="middle">
            <div class="box">
              <p>
                 Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text.
                 Sample text. Sample text. Sample text. Sample text. Sample text.  Sample text. Sample text. Sample text. Sample text.
              </p>


            </div>

              <div class="box">
              <p>
                Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text.
                 Sample text. Sample text. Sample text. Sample text. Sample text.  Sample text. Sample text. Sample text. Sample text.
             </p>

             </div>
            
            <div class="box">
            <p>
               Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text.
               Sample text. Sample text. Sample text. Sample text. Sample text.  Sample text. Sample text. Sample text. Sample text.
            </p>
              


            </div>

        </div>

        <div class="right">
            <div class="headbox">
                <h3>Visit Us</h3>
              
            </div>

            <div class="list">
                   <ul>
                       <li><a href="#">Home</a></li>
                       <li><a href="#">Hours</a></li>
                       <li><a href="#">Plan</a></li>
                       <li><a href="#">Directions</a></li>

                   </ul>
            </div>


            
            

        </div>
    </div>

</div>