flexbox not wrapping items - css

Question

I'm really new to flexbox and I'm trying to understand why my flexbox won't wrap when the browser window width gets smaller. The row never turns into a column. why is that? I appreciate any help?
stackblitz
.listingBody {
min-height: 100vh;
}
.listingCard {
width: 800px;
height: 400px;
border-width: 2px;
border-style: solid;
display: flex;
flex-flow: row wrap;
border-radius: 25px;
background: white;
margin: 0 auto;
justify-content: center;
align-items: center;
box-shadow: 10px 10px 5px -2px #888;
}
.image {
width: 200px;
height: 200px;
background-color: red;
}
.rules {
width: 200px;
height: 200px;
background-color: green;
}
.info {
width: 200px;
height: 200px;
background-color: blue;
}
<div class="listingBody">
<div class="listingCard">
<div class="image">
test
</div>
<div class="info">
test
</div>
<div class="rules">
test
</div>
</div>
</div>

Answer 1

It won't wrap because you set a fixed width to the parent div. You can either just use max-width or remove it altogether.
.listingBody {
min-height: 100vh;
}
.listingCard {
height: 400px;
border-width: 2px;
border-style: solid;
display: flex;
flex-flow: row wrap;
border-radius: 25px;
background: white;
margin: 0 auto;
justify-content: center;
align-items: center;
box-shadow: 10px 10px 5px -2px #888;
}
.image {
width: 200px;
height: 200px;
background-color: red;
}
.rules {
width: 200px;
height: 200px;
background-color: green;
}
.info {
width: 200px;
height: 200px;
background-color: blue;
}
<div class="listingBody">
<div class="listingCard">
<div class="image">
test
</div>
<div class="info">
test
</div>
<div class="rules">
test
</div>
</div>
</div>

Answer 2

This happens because you are setting a fixed with to the container div without a max width. You can just change the .listingCard style to this:
.listingCard {
width: 800px;
max-width: 100%; /* <-- add this */
height: 400px;
border-width: 2px;
border-style: solid;
display: flex;
flex-flow: row wrap;
border-radius: 25px;
background: white;
margin: 0 auto;
justify-content: center;
align-items: center;
box-shadow: 10px 10px 5px -2px #888;
}
Or just replace width: 800px and max-width: 100% with max-width: 800px which will provide the same effect.
By doing it like this it the content will have a max width of 800px in case the window is larger than 800px or adjust to the window size in case it is resized to a lower width.

Answer 3

The flex items are not wrapping because you have a width set on the flexbox container, so narrowing the browser window smaller than that won't change the size of the flexbox container and therefore the flex items will have no reason to wrap.
Try replacing width: 800px; on .listingCard with max-width: 800px;