Div disappears after media query sets flex-direction to column, probably because of flex property

Question

So I wanted to make some overlapping content using flex-box. On wide screen flex-direction is set to row, but on smaller screens I wanted to change it to column.

body {
  min-height: 100vh;
  background-color: #d6bd9e;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  width: 90%;
  max-width: 960px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.left {
  border: 2px solid green;
  flex: 1 40%;
  width: 40%;
  height: 30rem;
  background: url("https://images.unsplash.com/photo-1512641406448-6574e777bec6?ixlib=rb-   1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHw%3D&w=1000&q=80") no-repeat;
  background-size: cover;
  border-radius: 8px;
}

.right {
  min-height: 20rem;
  flex: 1 50%;
  background-color: #4d6d52;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5em;
  border-radius: 8px;
  margin-left: -4em;
}

@media(max-width: 500px) {
  .container {
    width: 100%;
    flex-direction: column;
  }
  .left {
    width: 90%;
  }
  .right {
    min-height: 14rem;
    margin: 0;
    margin-top: -6em;
    background: transparent;
  }
}

<div class="container">
  <div class="left"></div>
  <div class="right">
    <h1 class="heading">
      This is a heading!
    </h1>
    <p class="lorem">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae iste nihil, quasi eos aspernatur doloribus quos consequatur animi. In, nemo!
    </p>
  </div>
</div>

I also set the background of .right to transparent so I can see my div is still there (I can see the green border), but the background-image seems to be missing. I'm pretty sure it has something to do with the flex: 1 40%; that I set in .left in the beginning, because when I get rid of this flex property, it seems to work. But my question is: Why does the .left div basically collapse when I change the flex-direction? I did some research and the only thing I found was that I have to set a height to the div, but as you can see in my code my .left already has a height. So I'm sure it has something to do with the flex property of my .left.

Answer 1

If I understood correctly, when you got to the media query width the background image would collapse but not completely disappear due to the green border.

I added a height property to the container in both the media code and original container selector and now the image doesn't disappear. Also make sure to add the meta tag to your html head tag! Hope this helps!

HTML

<meta name="viewport" content="width=device-width, initial-scale=1">

CSS

body{
  min-height: 100vh;
  background-color:#d6bd9e;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container{
  width: 90%;
  height: 100vh;
  max-width: 960px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.left{
  border: 2px solid green;
  flex: 1 40%;
  width: 40%;
  height: 30rem;
  background: url("https://images.unsplash.com/photo-1512641406448-6574e777bec6?ixlib=rb-   1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHw%3D&w=1000&q=80") no-repeat;
  background-size: cover;
  border-radius: 8px;
}

.right{
  min-height: 20rem;
  flex: 1 50%;
  background-color: #4d6d52;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5em;
  border-radius: 8px;
  margin-left: -4em;
}

@media all and (max-width: 500px){
  .container{
    width: 100%;
    flex-direction: column;
    height: 80vh;
  }

  .left{
    width: 90%;
  }   

  .right{
    width: 75%;
    min-height: 14rem;
    margin: 0;
    margin-top: -6em;
  }
}