【发布时间】：2020-08-28 05:00:21
【问题描述】：
我在编写一些 css/html 元素时遇到了这个问题。一直在网上搜索潜在的解决方案，但似乎没有一个能解决我的问题。
我有动态数量的子元素需要适合父元素（弹性容器）进行显示。子元素有点像徽章，您可以在其中显示信息。悬停时，子元素应展开宽度过渡，并显示一个实用程序图标供我单击。到目前为止一切都很好。问题是悬停时，因为孩子会展开，如果它是 flex 中行的“最后一个”孩子，它将移动到下一行并完全展开，我无法再到达图标。
有什么解决办法吗？我尝试对孩子施加负边距以欺骗它留在它所在的同一行，但孩子本身的整个身体在溢出时被父容器切断（它看起来也不是很好）。
我还尝试强制每行仅包含 n 个子元素（例如每行 2 个子元素），但这只会降低问题发生的机会，并不能有效地消除它。
我希望寻找的是保持宽度过渡，并允许动态数量的子元素填充到父容器元素中，并在每行填充尽可能多的子元素（因此是 flex 行换行），而所有子元素都是向左冲。
演示（下）中的“&”是图标；请注意，悬停时无法到达某些行末尾的某些子元素，因为它们会进入下一行。
.flex-container {
height: 100px;
width: 400px;
overflow-y: auto;
display: flex;
flex-flow: row wrap;
}
.flex-badge {
display: inline-flex;
margin-right: 0.5vw;
margin-bottom: 0.5vh;
background-color: lightblue;
border: 1px solid black;
cursor: pointer;
}
.hiddenIconTray {
display: flex;
overflow: hidden;
width: 0;
transition: width 0.5s;
}
.flex-badge:hover > .hiddenIconTray {
width: 20px;
}
.flex-badge:hover {
background-color: yellow;
}<div class="flex-container">
<div class="flex-badge">Lorem ipsum dolor sit amet
<div class="hiddenIconTray">
<i class="icon">&</i>
</div>
</div>
<div class="flex-badge">Lorem
<div class="hiddenIconTray">
<i class="icon">&</i>
</div>
</div>
<div class="flex-badge">Lorem
<div class="hiddenIconTray">
<i class="icon">&</i>
</div>
</div>
<div class="flex-badge">Lorem
<div class="hiddenIconTray">
<i class="icon">&</i>
</div>
</div>
<div class="flex-badge">Lorem
<div class="hiddenIconTray">
<i class="icon">&</i>
</div>
</div>
<div class="flex-badge">ipsum dolor sit
<div class="hiddenIconTray">
<i class="icon">&</i>
</div>
</div>
<div class="flex-badge">Lorem ipsum dolor sit amet
<div class="hiddenIconTray">
<i class="icon">&</i>
</div>
</div>
<div class="flex-badge">ipsum dolor sit amet
<div class="hiddenIconTray">
<i class="icon">&</i>
</div>
</div>
<div class="flex-badge">Lorem ipsum dolor sit amet
<div class="hiddenIconTray">
<i class="icon">&</i>
</div>
</div>
<div class="flex-badge">Lorem
<div class="hiddenIconTray">
<i class="icon">&</i>
</div>
</div>
<div class="flex-badge">Lorem ipsum dolor sit amet
<div class="hiddenIconTray">
<i class="icon">&</i>
</div>
</div>
<div class="flex-badge">Lorem ipsum dolor sit amet
<div class="hiddenIconTray">
<i class="icon">&</i>
</div>
</div>
<div class="flex-badge">Lorem
<div class="hiddenIconTray">
<i class="icon">&</i>
</div>
</div>
<div class="flex-badge">ipsum dolor
<div class="hiddenIconTray">
<i class="icon">&</i>
</div>
</div>
<div class="flex-badge">Lorem
<div class="hiddenIconTray">
<i class="icon">&</i>
</div>
</div>
<div class="flex-badge">ipsum dolor
<div class="hiddenIconTray">
<i class="icon">&</i>
</div>
</div>
<div class="flex-badge">Lorem ipsum
<div class="hiddenIconTray">
<i class="icon">&</i>
</div>
</div>
<div class="flex-badge">Lorem ipsum dolor sit amet
<div class="hiddenIconTray">
<i class="icon">&</i>
</div>
</div>
<div class="flex-badge">ipsum dolor
<div class="hiddenIconTray">
<i class="icon">&</i>
</div>
</div>
<div class="flex-badge">Lorem ipsum dolor sit amet
<div class="hiddenIconTray">
<i class="icon">&</i>
</div>
</div>
</div>谢谢！
【问题讨论】：
-
如果有机会，请检查我在解决方案中提供的两个示例。