即使在设置 min-width:0 之后，Flex 子组件也会溢出父容器？ [复制]

Question

这个问题在这里已经有了答案：

为什么 flex items 不缩小超过内容大小？ (3 个回答)

去年关闭。

子 flex 项目超出了父容器的宽度。 我也尝试设置 min-width:0 但仍然无法正常工作。

这是我的 HTML 和 CSS 代码：

 .parent{ display: flex; border: 2px solid red; } .child1{ background: cyan; height: 40px; width: 40px; flex-shrink: 0; } .child2 { background: pink; height: 20px; width: 20px; } .child3 { background: yellow; height: 20px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

 <div class='parent'> <div class='child1'>1</div> <div> <div class='child2'>2</div> <div class='child3'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus sagittis odio, ac pulvinar tortor sagittis et. In hac habitasse platea dictumst. Phasellus ut velit dolor. Vestibulum pulvinar orci libero, in aliquet arcu auctor non. Morbi volutpat elit id lacus cursus, at imperdiet tellus eleifend. Morbi euismod vehicula urna, sed pretium felis ullamcorper vitae. Nunc at ligula a odio eleifend convallis eget sed orci. Praesent fermentum, sem in congue tempus, ex diam suscipit neque, in ullamcorper orci erat eu orci.</div> </div> </div>

我的动机是防止child3溢出父容器并在溢出时显示省略号（...）。

任何帮助表示赞赏。

Answer 1

您发布的内容存在一些问题，但不要担心我们可以为您解决问题。

什么是弹性，什么不是

首先让我们看看你的标记：

.parent是一个带有display: flex的元素。 根据您的命名，我们可能会错误地假设它的孩子是：

• .child1 ,
• .child2和
• .child3 。

……但事实并非如此。

.parent的孩子实际上是：

• .child1和
• 一个无类的div 。

无类div没有为其设置样式，因此.child2和.child3未定位在 flexbox 上下文中。 因此，您的min-width: 0 on .child3不能解决您的问题，因为该解决方案仅适用于 flex 子项。

在正确的上下文中应用min-width

首先，让我们给那个孩子div一个类： .foo 。

.foo本身有一个块显示，但目前它允许内容（在.child3 ）溢出。 我们想要防止溢出的正是这个元素：

.foo {
  min-width: 0;
}

这应该就是你所需要的。 似乎您已经熟悉为什么我们使用min-width来帮助解决这个问题，但以防万一，您可以在CSS Tricks: Flexbox and Truncated Text 中阅读它。

解决方案

下面是所有这些放在一起。

 .parent { display: flex; border: 2px solid red; } .foo { min-width: 0; outline: 1px solid rebeccapurple; } .child1 { background: cyan; height: 40px; width: 40px; flex-shrink: 0; } .child2 { background: pink; height: 20px; width: 20px; } .child3 { background: yellow; height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

 <div class='parent'> <div class='child1'>1</div> <div class="foo"> <div class='child2'>2</div> <div class='child3'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus sagittis odio, ac pulvinar tortor sagittis et. In hac habitasse platea dictumst. Phasellus ut velit dolor. Vestibulum pulvinar orci libero, in aliquet arcu auctor non. Morbi volutpat elit id lacus cursus, at imperdiet tellus eleifend. Morbi euismod vehicula urna, sed pretium felis ullamcorper vitae. Nunc at ligula a odio eleifend convallis eget sed orci. Praesent fermentum, sem in congue tempus, ex diam suscipit neque, in ullamcorper orci erat eu orci. </div> </div> </div>

Answer 2

正如我在评论中所说，您没有任何限制 child-3 div 的长度。 你的min-width:0不会有任何影响，因为那只是说 div 可以占用尽可能多的空间。

child-3 （顺便说一下， child-2 ）没有任何父级，因此没有任何限制，因此它使用了所有可用宽度。

您需要为孩子提供一个带有overflow:hidden的flex 父级，然后对其宽度设置限制。 假设您想要相同的父类型，您可以执行以下操作：

更新：下面的代码，您可以使用相同的parent类来包装您的 child-2 和 child-3，使其行为相同：

 .parent { display: flex; border: 2px solid red; overflow: hidden; } .child1 { background: cyan; height: 40px; width: 40px; flex-shrink: 0; } .child2 { background: pink; height: 20px; width: 20px; } .child3 { background: yellow; height: 20px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

 <div class='parent'> <div class='child1'>1</div> <div class='parent'> <div class='child2'>2</div> <div class='child3'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus sagittis odio, ac pulvinar tortor sagittis et. In hac habitasse platea dictumst. Phasellus ut velit dolor. Vestibulum pulvinar orci libero, in aliquet arcu auctor non. Morbi volutpat elit id lacus cursus, at imperdiet tellus eleifend. Morbi euismod vehicula urna, sed pretium felis ullamcorper vitae. Nunc at ligula a odio eleifend convallis eget sed orci. Praesent fermentum, sem in congue tempus, ex diam suscipit neque, in ullamcorper orci erat eu orci. </div> </div> </div>

Answer 3

如果您想要完全相同的结果：

 .parent{ display: flex; border: 2px solid red; } .child1{ background: cyan; height: 40px; width: 40px; flex-shrink: 0; } .child-wrapper{ display:flex; flex-direction: column; overflow: hidden; } .child2 { background: pink; height: 20px; width: 20px; } .child3 { background: yellow; height: 20px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

 <div class='parent'> <div class='child1'>1</div> <div class='child-wrapper'> <div class='child2'>2</div> <div class='child3'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus sagittis odio, ac pulvinar tortor sagittis et. In hac habitasse platea dictumst. Phasellus ut velit dolor. Vestibulum pulvinar orci libero, in aliquet arcu auctor non. Morbi volutpat elit id lacus cursus, at imperdiet tellus eleifend. Morbi euismod vehicula urna, sed pretium felis ullamcorper vitae. Nunc at ligula a odio eleifend convallis eget sed orci. Praesent fermentum, sem in congue tempus, ex diam suscipit neque, in ullamcorper orci erat eu orci.</div> </div> </div>