Split the height of a div between children-CodePudding

I want the height of a container to be divided between the children it has inside, being that if it has two children they each occupy 50%, but if there is only one that occupies 100%, how can I do this?

My code CSS

.time_slot_buttons_container {
    overflow: hidden;
    width: 50px;
    .time_slot_erase {
        background-color: $semantic_err_dark1;
        @include center;
        cursor: pointer;
        .time_slot_erase_img { 
            width: 25px;
        }
    }
    .time_slot_edit {
        background-color: $semantic_info_regular;
        @include center;
        cursor: pointer;
        .time_slot_edit_img {
            width: 25px;
            filter: invert(96%) sepia(34%) saturate(0%) hue-rotate(81deg) brightness(103%) contrast(100%);
        }
    }
}

CodePudding user response：

use flex and use the template

.time_slot_buttons_container {
    display: flex; 
    flex-direction: column;
    justify-content: space-between;
  }

  .time_slot_erase, .time_slot_edit {
    flex: 1;
    margin: 5px;
    border: solid;
  }

live example