即使设置最小宽度:0，弹性子容器也会溢出父容器?

Question

子弹性项溢出父容器的宽度。我也尝试设置最小宽度：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不会放置在弹性框上下文中。出于这个原因，您对.child3min-width: 0并不能解决您的问题，因为该解决方案仅适用于灵活儿童。

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

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

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

.foo {
min-width: 0;
}

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

溶液

以下是所有这些内容。

.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

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

.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>

Answer 3

正如我在评论中所说，您没有任何限制孩子 3div 的长度。您的min-width:0不会产生任何影响，因为这只是说div 可以根据需要占用尽可能多的空间。

child-3(顺便说一下child-2)没有任何父级，因此没有什么可以限制它，因此它使用了所有可用的宽度。

您需要给孩子一个带有overflow:hidden的弹性父项，然后设置其宽度限制。 假设您想要相同的父类型，则可以执行以下操作：

更新：下面的代码，您可以使用相同的parent类来包装您的子项-2 和子项-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>