Stretch div's content evenly according to height

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.