J'ai cherché parmi les questions disponibles mais je n'ai pas trouvé de solution.
J'essaie de définir la hauteur de tous les éléments d'un conteneur de débordement horizontal pour qu'elle soit égale à la hauteur de l'élément le plus long.
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>
Comme vous pouvez le constater, la deuxième division est la plus longue. L'autre div doit être égal au deuxième div. De plus, je n'ai pas besoin d'une hauteur fixe.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Vous pouvez utiliser la mise en page 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%; }ne peut pas être enveloppé dans
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; }