У меня есть этот код (упрощенно из React):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<style>
.container {
background-color: #8fb8ff;
width: 15.75rem;
padding: 1rem;
position: absolute;
z-index: 3;
border-radius: 0.25rem;
box-shadow: 0 1px 4px #d7d8db;
height: 2.25rem;
}
.item {
background-color: #FFF68F;
border-bottom: 1px solid #e7eefe;
padding: calc(1em - 0.5rem);
font-size: inherit;
}
.input__container {
display: block;
width: 100%;
max-width: 100%;
}
.input__dropdown {
position: relative;
}
.input__dropdown__container {
position: absolute;
z-index: 3;
top: 100%;
left: 0;
min-width: 100%;
border-radius: 0;
}
.input__textinput {
position: relative
display: flex;
width: 100%;
border-bottom: 1px solid #777b83;
align-items: center;
font-size: inherit;
padding: calc(1em - 0.5rem)
}
.input__textinput__border {
position: absolute;
display: block;
bottom: 0%;
left: 50%;
width: 0;
border-bottom: solid 2px #3264c8;
transform: translate(-50%, 1px);
}
.input__textinput__input {
flex: 1;
font-size: inherit;
width: 100%;
background-color: #baff8f;
border: 0;
}
.input__textinput__trailing-icon {
padding: 0.0.125rem;
cursor: pointer;
}
.window__content__text {
flex: 1;
}
.window__content {
display: flex;
white-space: preline;
}
</style>
</head>
<body>
<div class="container">
<div class="input__container">
<div class="input__dropdown">
<div class="window__content">
<div class="window__content__text">
<div class="input__textinput">
<input class="input__textinput__input" autocomplete="nofill" onclick="toggledropdown()" placeholder="Search User" type="text">
<i class="input__textinput__trailing-icon"></i>
<div class="input__textinput__border"></div>
</div>
<div class="input__dropdown__container" id="dropdown">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function toggledropdown () {
var x = document.getElementById("dropdown")
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html>
Я хочу, чтобы синий родительский div имел разную высоту: когда выпадающий список не виден, высота равна 2.25 rem. Когда в выпадающем меню есть только 1 вариант, это 4.25rem. Когда есть 2 или более вариантов, это 7.25rem, и при необходимости появится прокрутка на синем div. Я хочу понять, что это достижимо с помощью CSS? Я хочу избежать использования javascript, если это возможно. Спасибо