在下面的代码中，我不明白如何将每个子元素（className 为 ??? 的子元素）的高度设置为与带有 ref 的容器相同的高度。我见过人们使用绝对定位来实现解决方法，但是，我无法让它在这里工作，因为有多个子元素。有谁知道如何仅使用 css 解决这个问题，或者在这种情况下是否严格需要使用 javascript？
编辑：我可能还必须使用 h-32 动态设置容器的高度，因此我不想使用计算解决方案
<div className="100dvh flex flex-col">
<div className="h-32">
{/* Some content */}
</div>
<div
className="relative flex flex-1 justify-between space-x-10 overflow-y-auto"
ref={ref}
>
<div className="flex flex-col items-start">
<div className="???" />
<div className="???" />
<div className="???" />
</div>
<div className="sticky top-0 flex h-full w-96 items-center justify-center">
{/* Some content */}
</div>
</div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Equal Height Child Elements with CSS Grid</title>
<style>
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
grid-gap: 10px; /* Adjust the gap between child elements as you want */
}
.child-element {
/* Add styles for child elements */
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="child-element">Child 1</div>
<div class="child-element">Child 2</div>
<div class="child-element">Child 3</div>
</div>
</body>
</html> <div> className="relative flex flex-1 justify-between space-x-10 overflow-y-auto"
ref={ref}
>
<div className="absolute top-0 h-full flex flex-row items-start">
<div className="h-full" />
<div className="h-full" />
<div className="h-full" />
</div>
<div className="sticky top-0 flex h-full w-96 items-center justify-center">
{/* Some content */}
</div>
</div>