我正在尝试制作一个小窗口，当你点击我网页上的按钮时会弹出。该窗口将如下所示，并显示有关您刚刚单击的按钮的信息。当文本过长时，如何阻止h2挤压图标？
同时我也在问，我怎么能把这两个人放在同一排，比现在更好呢？不同的文本字符串将把h2放在不同的区域+带上我的图标。谢谢。
.main {
border: solid 2px #939388;
border-radius: 10px;
background-color: #0f0f3de8;
box-shadow: 0 0.1em 0.3em 0.1em rgba(0, 0, 0, 0.6);
margin-top: 20px;
width: 400px;
height: 300px;
}
.inner {
display: flex;
flex-direction: row;
justify-content: center;
margin: 20px;
}
h2 {
color: white;
text-align: center;
}
.icon {
border: solid 1px #939388;
border-radius: 10px;
background-image: url(https://imgur.com/TIKOFh6.png);
box-shadow: 0 0.1em 0.1em 0.1em rgba(0, 0, 0, 0.425);
height: 78px;
width: 78px;
margin-right: 20px;
background-repeat: no-repeat;
}<body>
<div class="main">
<div class="inner">
<div class="icon"></div>
<h2>This long string of text squishes my icon</h2>
</div>
</div>
</body>您只需要flex-shrink: 0;:
对于对齐，您可以在.inner上试用align-items，例如align-items: center;
.main {
border: solid 2px #939388;
border-radius: 10px;
background-color: #0f0f3de8;
box-shadow: 0 0.1em 0.3em 0.1em rgba(0, 0, 0, 0.6);
margin-top: 20px;
width: 400px;
height: 300px;
}
.inner {
display: flex;
flex-direction: row;
justify-content: center;
margin: 20px;
align-items: center;
}
h2 {
color: white;
text-align: center;
}
.icon {
border: solid 1px #939388;
border-radius: 10px;
background-image: url(https://imgur.com/TIKOFh6.png);
box-shadow: 0 0.1em 0.1em 0.1em rgba(0, 0, 0, 0.425);
height: 78px;
width: 78px;
margin-right: 20px;
background-repeat: no-repeat;
flex-shrink: 0;
}<body>
<div class="main">
<div class="inner">
<div class="icon"></div>
<h2>This long string of text <em>doesn't</em> squish my icon</h2>
</div>
</div>
</body>