Минимальная высота списка, чтобы она соответствовала как минимум n элементам списка с обычным CSS

Question

У меня есть какой-то заголовок div, содержащий список с динамическим c количеством элементов, и я хочу, чтобы высота заголовка была фиксированной; Если в списке слишком много элементов, ul будет переполнять заголовок при наведении (или отображаются только последние 2 элемента), о которых уже позаботятся:

https://jsfiddle.net/te5cykdn/11/

function fill(n) {
  let ul = document.getElementsByTagName("ul")[0];
  ul.innerHTML = "";

  for (let i = 0; i < n; i++) {
    let li = document.createElement("li");
    li.innerHTML = i;
    ul.appendChild(li);
  }
}

html,
body {
  height: 100%;
}

div {
  height: 50px;
  border: 2px solid black;
}

ul {
  list-style-type: none;
  padding: 5px;
  margin: 0;
  position: relative;
}

ul:hover {
  overflow-y: visible;
  z-index: 1;
}

li {
  text-align: center;
}

ul>li:hover {
  color: white;
  cursor: pointer;
}

ul:not(:hover)>li:nth-last-child(n+3) {
  display: none;
}

ul>li:nth-child(even) {
  background-color: red;
}

ul>li:nth-child(odd) {
  background-color: blue;
}

<button onclick="fill(1)">1 item</button>
<button onclick="fill(2)">2 items</button>
<button onclick="fill(3)">3 items</button>
<button onclick="fill(4)">4 items</button>

<div>
  <ul></ul>
</div>

Но как мне установить фиксированную высоту заголовка без жесткого кодирования px, скорее что-то вроде: фиксированная высота для поместите как минимум 2 элемента списка, скажем , используя обычный CSS, а не JavaScript?

Итак, еще раз, я знаю, как исправить высоту; у меня вопрос как это сделать без установки фиксированной высоты пикселя.

Answer 1

Вы можете установить line-height для ваших элементов li и использовать то же значение, что и множитель:

function fill(n) {
  let ul = document.getElementsByTagName("ul")[0];
  ul.innerHTML = "";

  for (let i = 0; i < n; i++) {
    let li = document.createElement("li");
    li.innerHTML = i;
    ul.appendChild(li);
  }
}

html,
body {
  height: 100%;
}

div {
  height: calc(var(--n)*1.2em);
  border: 2px solid black;
  padding: 5px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding:0;
  position: relative;
}

ul:hover {
  overflow-y: visible;
  z-index: 1;
}

li {
  text-align: center;
  line-height:1.2em;
}

ul>li:hover {
  color: white;
  cursor: pointer;
}

ul:not(:hover)>li:nth-last-child(n+3) {
  display: none;
}

ul>li:nth-child(even) {
  background-color: red;
}

ul>li:nth-child(odd) {
  background-color: blue;
}

<button onclick="fill(1)">1 item</button>
<button onclick="fill(2)">2 items</button>
<button onclick="fill(3)">3 items</button>
<button onclick="fill(4)">4 items</button>

<div style="--n:2">
  <ul></ul>
</div>