Div Only Prints Horizontally - html

Question

I've been working in a page that works with bootstrap, contains just css and html and printing a box with a picture, but i'm stucking in a little creepy thing, and it is that the box only prints horizontally tried overflow-wrap: wrap; but no luck same thing with max-width, any one know what's the problem?
My Expected Thing: To Print Like 4 Boxes And Then Heads To Next Line
.modal-content {
width: 750px;
margin-left: 125px;
}
.modal-dialog {
margin: 105px;
}
.button {
display: block;
margin :30px;
}
body {
font-family: 'Roboto', sans-serif;
background-color: #eee;
display: inline-flex;
flex-direction: row;
overflow-wrap: wrap;
overflow-y: hidden;
max-width: 100px;
min-height: 500px;
}
.contain {
display: flex;
flex-direction: row;
}
.stage {
background: #fff;
height: 150px;
width: 200px;
margin : 40px;
flex-wrap: wrap;
background-color: red;
box-shadow: 1px 4px 11px #aaa, inset 1px 3px 6px #ccc;
padding: 1em 0 3em;
position: relative;
}
.stage-content {
background-repeat: no-repeat;
background-size: contain;
width: 200px;
height: 150px;
background-position: top
margin-bottom: 10px;
padding-top: 60%;
background-image: url("data:image/jpeg;base64,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");
}
.stage-content:after {
content: 'mamamia';
text-align: center;
display: block;
font-size:10px;
text-transform: uppercase;
transform: translateY(0.5em);
}
.curtain-container {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.curtain-panel {
display: flex;
height: 150px;
width: 100%;
cursor: pointer;
overflow: hidden;
}
.curtain-panel .curtain {
width: 100%;
background-color: orange;
height: 150px;
position: relative;
transition: transform 0.5s ease-out;
display: flex;
align-items: center;
overflow: hidden;
}
.curtain-panel .curtain:before {
content: attr(data-title);
font-size:10px;
text-align: center;
width: 200%;
position: absolute;
top: 50%;
line-height: 0;
text-shadow: 1px 1px 3px #ccc;
}
.curtain-panel .left-curtain:before {
left: 0;
}
.curtain-panel .right-curtain:before {
right: 0;
}
.curtain-panel .curtain:after {
content: '';
background-size: 20px 20px;
background-image: radial-gradient(circle at 10px -5px, rgba(0, 0, 0, 0) 12px, #fff 13px);
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.curtain-trigger {
visibility: hidden;
position: absolute;
}
.curtain-trigger:hover ~ .left-curtain {
transform: translateX(calc(-100% + 2em));;
}
.curtain-trigger:hover ~ .right-curtain {
transform: translateX(calc(100% - 2em));
}
<html>
<head>
<title>Testing</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js" integrity="sha384-XEerZL0cuoUbHE4nZReLT7nx9gQrQreJekYhJD9WNWhH8nEW+0c5qq7aIo2Wl30J" crossorigin="anonymous"></script>
</head>
<body>
<div class="contain"><div class="stage">
<div class="stage-content"><span class="button"><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop0">
Launch static backdrop modal
</button></span></div>
<label class="curtain-container">
<div class="curtain-panel">
<input type="checkbox" class="curtain-trigger" />
<div class="left-curtain curtain" data-title="Marwan Moussa"></div>
<div class="right-curtain curtain" data-title="Marwan Moussa"></div>
</div>
</label>
</div><div class="stage">
<div class="stage-content"><span class="button"><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop1">
Launch static backdrop modal
</button></span></div>
<label class="curtain-container">
<div class="curtain-panel">
<input type="checkbox" class="curtain-trigger" />
<div class="left-curtain curtain" data-title="Final Maro Trying"></div>
</div>
</div>
<div class="right-curtain curtain" data-title="Final Maro Trying"></div>
</div>
</label>
</div><div class="stage">
<div class="stage-content"><span class="button"><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop2">
Launch static backdrop modal
</button></span></div>
<label class="curtain-container">
<div class="curtain-panel">
<input type="checkbox" class="curtain-trigger" />
<div class="left-curtain curtain" data-title="Marwaaaaan"></div>
</div>
</div>
<div class="right-curtain curtain" data-title="Marwaaaaan"></div>
</div>
</label>
</div><div class="stage">
<div class="stage-content"><span class="button"><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop3">
Launch static backdrop modal
</button></span></div>
<label class="curtain-container">
<div class="curtain-panel">
<input type="checkbox" class="curtain-trigger" />
<div class="left-curtain curtain" data-title="Omar"></div>
</div>
</div>
</div>
<div class="right-curtain curtain" data-title="Omar"></div>
</div>
</label>
</div><div class="stage">
<div class="stage-content"><span class="button"><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop4">
Launch static backdrop modal
</button></span></div>
<label class="curtain-container">
<div class="curtain-panel">
<input type="checkbox" class="curtain-trigger" />
<div class="left-curtain curtain" data-title="Marorooor"></div>
</div>
</div>
</div>
<div class="right-curtain curtain" data-title="Marorooor"></div>
</div>
</label>
</div></div></body>
</html></body>