我搜尋了可用的問題，但沒有找到解決方案。
我試圖將水平溢出容器的所有元素的高度設定為等於最長元素的高度。
body {
}
section{
width: 300px;
background: lightblue;
overflow: auto;
white-space: nowrap;
}
div{
display: inline-block ;
max-width: 150px;
background: lightgreen;
margin: 5px;
white-space: normal;
/* not working */
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<section>
<div>
hi there how are you push just IV by Rd hi TX cu
</div>
<div>
hi there how are you push just IV by Rd hi TX cu jdi HD so of fr edg of Dr edg KB hi
</div>
<div>
hi there how are you push just IV by Rd hi TX cu
</div>
</section>
</body>
</html>
如您所見，第二個 div 最長。其他 div 應該等於第二個 div。 另外，我不需要固定高度。
P粉7908197272024-03-23 09:37:00
您可以使用 Flex 佈局。
section{
width: 300px;
background: lightblue;
overflow: auto;
white-space: nowrap;
display: flex;
align-items: center;
}
div{
display: inline-block ;
max-width: 150px;
background: lightgreen;
margin: 5px;
white-space: normal;
height: 100%;
}
P粉4038217402024-03-23 00:24:25
在 divs 上設定 min-width 並使其父級 flex 不能被包裹。
section {
display: flex; /* new */
flex-wrap: nowrap; /* new */
width: 300px;
background: lightblue;
overflow: auto;
}
div {
min-width: 150px; /* new */
background: lightgreen;
margin: 5px;
}