html - 即使在设置最小宽度 :0? 之后，Flex 子容器也会溢出父容器

Question

<分区>

Answer 1

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

什么是 flex ，什么不是

首先让我们看看您的标记:

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

• .child1,
• .child2，和
• .child3.

……但情况不是。

.parent 的 child 实际上是:

• .child1，和
• 无类 div。

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

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

首先，让我们给那个 child div 一个类:.foo。

.foo 本身有 block 显示，但目前它允许内容(在 .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>