https://jsbin.com/vuzabududi/edit? html，js，輸出

有人知道我怎樣才能做到:

如果顯示頂部的列表(不顯示:無(wú)；)主列表要占盡可能多的高度。 如果列表顯示在頂部，它應(yīng)該占據(jù)足夠的空間來(lái)顯示它的內(nèi)容，最大高度是主列表的50%或相同的高度。

document.getElementById("add_elements_top").addEventListener("click", function () {
    var N = 5; // Number of elements to add

    // Add elements to list_on_top
    var listOnTop = document.getElementById("list_on_top");
    for (var i = 2; i <= N + 1; i++) {
      var li = document.createElement("li");
      var label = document.createElement("label");
      var checkbox = document.createElement("input");
      checkbox.type = "checkbox";
      checkbox.name = "checkboxes";
      checkbox.value = "";
      checkbox.id = "checkbox_" + i;
      label.appendChild(checkbox);
      label.appendChild(document.createTextNode("XXXXXXX: €1234.56"));
      li.appendChild(label);
      listOnTop.appendChild(li);
    }

    
  });

  
document.getElementById("add_elements_main").addEventListener("click", function () {
    var N = 5; // Number of elements to add

    // Add elements to list_on_top
    var main_list = document.getElementById("main_list");
    for (var i = 2; i <= N + 1; i++) {
      var li = document.createElement("li");
      var label = document.createElement("label");
      var checkbox = document.createElement("input");
      checkbox.type = "checkbox";
      checkbox.name = "checkboxes";
      checkbox.value = "";
      checkbox.id = "checkbox_" + i;
      label.appendChild(checkbox);
      label.appendChild(document.createTextNode("XXXXXXX: €1234.56"));
      li.appendChild(label);
      main_list.appendChild(li);
    }
  });

#separator {
    margin-bottom: 2rem;
    border-top: 1px solid black;
    width: 100%;
}

#step3 {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    margin-top: 20px;
    padding: 10px;
    background-color: #eee;
    max-height: 75vh;
}

#step3 ul {
  min-height: 50%;
}


#step3.collapsed {
    max-height: 0;
}


#container label {
    font-weight: bold;
    margin-bottom: 5px;
}

#container select {
    display: block;
    margin: 5px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

#container ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: auto;
    min-width: 100%;
    align-content: flex-start;
    align-items: flex-start;
    justify-content: flex-start;
}

#container li {
    margin-bottom: 10px;
    width: 33%;
}

#container input[type="checkbox"]:checked + label {
    font-weight: bold;
    color: blue;
}

<button id="add_elements_top" class="btn btn-success">Add 5 Elements Top</button>
<button id="add_elements_main" class="btn btn-success">Add 5 Elements Main</button>
<div id="container" class="container-fluid d-flex flex-column">
  <div id="step3" class="">
    <label for="search">Search checkbox:</label>
    <input type="text" id="search" placeholder="Search checkbox..." />
    <label for="list_on_top" class=""
      >List on top:
      <button id="select_all_preselect">select all</button
      ><button id="unselect_all_preselect">Unselect all</button></label
    >
    <ul id="list_on_top" class=""></ul>
    <hr id="separator" class="" />
    <ul id="main_list" class=""></ul>
    <div class="buttons">
      <button id="back_to_step2" class="btn btn-danger">Back</button>
      <button id="next_to_summary" class="btn btn-primary">Next</button>
    </div>
  </div>
</div>