我在flex容器中有box元素。我希望将鼠标悬停在框上时显示框中的段落。然而，悬浮的盒子也会使其他盒子生长。在悬停一个框时，有没有办法避免影响其他框
我会尝试：align items:flex start，但我希望这些框在不悬停时高度相等
因此对齐项目：当框未悬停时，flex start不会保持框的高度相等
我希望框在悬停时放大而不影响其他框，并在未悬停时返回到等效高度。
代码笔链接：https://codepen.io/lemour-sudo/pen/yLMQOpE
.container > * {
width: 25em;
padding: 1em;
text-align: center;
}
.container {
display: flex;
justify-content: space-around;
margin: 3em 10em;
border: solid 3px green;
}
p {
display: none;
}
.box {
border: solid 3px red;
}
.box:hover p {
display: block;
}<div class="container">
<div class="box">
<h1>Box 1</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nam tenetur amet dignissimos, accusantium molestias tempora!
</p>
</div>
<div class="box">
<h1>Box 2</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto voluptatum labore totam natus illo, magni inventore cupiditate hic omnis ipsam vero nobis enim dicta perferendis facilis tenetur quaerat! Voluptas, voluptatum.
</p>
</div>
</div>我不知道该怎么做，但我认为这种方式更好。它更加可定制。我同意vals的回答，但如果你不想让容器一直向下生长，这种方式更好。
* {
margin: 0;
padding: 0;
box-sizing:border-box;
}
.con {
width: 90%;
display: flex;
align-items: center;
justify-content: space-around;
border: 3px solid black;
}
.item {
border: 3px solid red;
width: 200px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
background-color: cadetblue;
}
.text-con {
position: absolute;
width: 100%;
top: 100%;
display: none;
background-color: cadetblue;
}
.item:hover .text-con {
display: block;
}<!DOCTYPE html>
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='style.css'>
</head>
<body>
<div class="con">
<div class="item">
<h1>box1</h1>
<div class="text-con">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis minus consequatur similique quas excepturi dignissimos optio nulla possimus</p>
</div>
</div>
<div class="item">
<h1>box2</h1>
<div class="text-con">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis minus consequatur similique quas excepturi dignissimos optio nulla possimus</p>
</div>
</div>
<div class="item">
<h1>box3</h1>
<div class="text-con">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis minus consequatur similique quas excepturi dignissimos optio nulla possimus</p>
</div>
</div>
</div>
</body>
</html>可能在容器悬停时设置flex启动？
.container > * {
width: 25em;
padding: 1em;
text-align: center;
}
.container {
display: flex;
justify-content: space-around;
margin: 3em 10em;
border: solid 3px green;
}
.container:hover {
align-items: flex-start;
}
p {
display: none;
}
.box {
border: solid 3px red;
}
.box:hover p {
display: block;
}<div class="container">
<div class="box">
<h1>Box 1</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nam tenetur amet dignissimos, accusantium molestias tempora!
</p>
</div>
<div class="box">
<h1>Box 2 bigger than 1</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto voluptatum labore totam natus illo, magni inventore cupiditate hic omnis ipsam vero nobis enim dicta perferendis facilis tenetur quaerat! Voluptas, voluptatum.
</p>
</div>
</div>另一种解决方案，在初始状态下具有不同的高度
.container > * {
width: 25em;
padding: 1em;
text-align: center;
}
.container {
display: flex;
justify-content: space-around;
margin: 3em 10em;
border: solid 3px green;
}
.container:hover {
align-items: flex-start;
}
p {
display: none;
}
.box {
border: solid 3px red;
height: fit-content;
}
.box:hover p {
display: block;
}<div class="container">
<div class="box">
<h1>Box 1</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nam tenetur amet dignissimos, accusantium molestias tempora!
</p>
</div>
<div class="box">
<h1>Box 2 bigger than 1</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto voluptatum labore totam natus illo, magni inventore cupiditate hic omnis ipsam vero nobis enim dicta perferendis facilis tenetur quaerat! Voluptas, voluptatum.
</p>
</div>
</div>