My goal was to create overlapping content using flex-box. When viewed on a large screen, the flex-direction is set to row, but for smaller screens, I wanted it to change 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 changed the background of .right to transparent so that I could still see my div (I can see the green border), but the background image appears to be missing. I suspect the issue lies with the flex: 1 40%; property that I set in .left initially because when I remove this flex property, everything seems to work fine. However, my question remains: Why does the .left div collapse when I switch the flex-direction? After some research, the only solution I found suggested setting a height for the div, but as evident from my code, my .left element already has a specified height. I am confident that the problem is related to the flex property of my .left element.