Stretch div's content evenly according to height - html

Question

I've created This box, but i can't set it's content to stretch accordingly to it's height... once the view is stretched to height - the content is still fixed...and not spread evenly...I've tried to set padding with percentage to the LI - but it's not
working....is there a way to set it only with CSS?
.cont {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: space-between;
}
.box {
width: 40vw;
height: 50vh;
}
.row_wrapper {
display: flex;
flex-direction: column;
background-color: grey;
border-radius: 5px;
overflow: hidden;
width: 100%;
height: 100%;
}
.flex-row {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 0px 0px 0px 0px;
margin: 0px;
}
.flex-outer {
width: 100%;
padding: 0px 0px 0px 0px;
margin: 0px;
}
.flex-row li {
width: 50%;
/* padding-right: 10px; */
}
.flex-outer li {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding-bottom: 5px;
}
.select {
width: 100%;
border-radius: 5px;
border: 1px solid #dcdcdc;
padding: 5%;
font-size: 0.7vw;
}
.parameters_btn {
border: none;
background-color: #49c8c1;
border-radius: 0.5vw;
font-size: 0.9vw;
padding: 1% 5% 2% 5%;
color: #fff;
outline: none;
width: 50%;
height: 20%;
}
.parameters_btn:hover {
background-color: #40afa9;
outline: none;
}
.parameters_btn:active {
background-color: #2d7c78;
outline: none;
}
.user_box_header {
background-color: #fff;
min-height: 20%;
align-items: center;
justify-content: start;
display: flex;
padding-left: 15px;
border-bottom: 1px solid #e9e9e9;
}
.user_box_header span {
font-size: 0.8vw;
color: #3f4760;
font-family: 'Montserrat Bold', sans-serif;
font-weight: 600;
}
.user_box_header i:before {
padding-right: 0.5vw;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #49c8c1;
font-size: 18px;
}
.user_notifications i:before {
content: "\f0a2";
}
.user_box_cont {
min-height: 80%;
padding: 5px 10px 5px 10px;
}
.material-switch {
width: 100%;
}
.material-switch>input[type="checkbox"] {
display: none;
}
.material-switch>label {
cursor: pointer;
height: 0px;
position: relative;
width: 40px;
}
.material-switch>input[type="checkbox"]+label::before {
content: "\f222";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #333333;
text-align: right;
border: 1px solid #dcdcdc;
padding-left: 10px;
padding-right: 10px;
font-size: 1vw;
}
.material-switch>label::before {
background-color: #f6f6f6;
border-radius: 50px;
height: 2.5vh;
margin-top: -12px;
position: absolute;
width: 8vw;
}
.material-switch>label::after {
/*--button---*/
content: "";
font-size: 1vw;
background-color: #fff;
border-radius: 50px;
height: 2.5vh;
left: -4px;
margin-top: -8px;
position: absolute;
top: -4px;
width: 6vw;
border: 1px solid #dcdcdc;
}
.material-switch>input[type="checkbox"]:checked+label::before {
background-color: #f6f6f6;
content: "\f221";
font-family: FontAwesome;
text-align: left;
font-size: 1vw;
}
.material-switch>input[type="checkbox"]:checked+label::after {
background-color: #fff;
left: 30px;
}
.femme {
display: none;
}
.material-switch>input[type="checkbox"]:checked+label>span.homme {
display: none;
}
.material-switch>input[type="checkbox"]:checked+label>span.femme {
display: block;
top: -8px;
}
.homme,
.femme {
font-family: 'Roboto Light', sans-serif;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #5d5d5d;
font-size: 0.7vw;
position: absolute;
top: -10px;
z-index: 999;
}
.material-switch>input[type="checkbox"]:checked+label .homme,
.material-switch>input[type="checkbox"]:checked+label .femme {
left: 43px;
}
.homme::before {
content: "\f222";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #49c8c1;
margin-right: 5px;
}
.femme::before {
content: "\f221";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #49c8c1;
margin-right: 5px;
}
<div class="cont">
<div class="box">
<div class="row_wrapper">
<div class="user_box_header user_notifications"><i></i>
<p>NOTIFICATIONS</p>
</div>
<div class="user_box_cont">
<ul class="flex-outer">
<li>
<ul class="flex-row">
<li>
<p>Select 3</p>
<select class="params_select">
<option>822-0123-56789</option>
<option>822-0123-56789</option>
<option>822-0123-56789</option>
</select>
</li>
<li>
<p>Select 4</p>
<select class="params_select">
<option>Jean-Luc BÉNAZET</option>
<option>Jean-Luc BÉNAZET</option>
<option>Jean-Luc BÉNAZET</option>
</select>
</li>
</ul>
<li>
</li>
</ul>
<ul class="flex-outer">
<li>
<ul class="flex-row">
<li>
<p>Select 3</p>
<select class="params_select">
<option>822-0123-56789</option>
<option>822-0123-56789</option>
<option>822-0123-56789</option>
</select>
</li>
<li>
<p>Select 4</p>
<select class="params_select">
<option>Jean-Luc BÉNAZET</option>
<option>Jean-Luc BÉNAZET</option>
<option>Jean-Luc BÉNAZET</option>
</select>
</li>
</ul>
<li>
<button class="parameters_btn">
Send
</button>
</li>
</ul>
</div>
</div>
</div>
</div>

Answer 1

To fit the content in the div you must not set the height fixed, use height:auto; you can add max-height and max width, also min-width, min-height.

Answer 2

it's because of your row wrappers height is static ,change its style like code below
.row_wrapper {
display: flex;
flex-direction: column;
background-color: grey;
border-radius: 5px;
overflow: hidden;
width: 100%;
height: auto;
}

Answer 3

It might happen because of your .box height is statically 50vh. If you can change it to auto may give desired output.
Find updated fiddler here. Hope it helps.