子组件溢出Flex容器父元素，文本截断失效如何修复？

问题根源 #

Flex容器的默认行为导致了这个问题：flex项（.component-container）默认带有min-width: auto属性，这会让它的宽度至少要容纳内部内容的最小宽度，不会被压缩到内容宽度以下。因此你给.example-component设置的max-width: 100%实际上是参照内容的宽度，而非卡片的可用宽度，最终导致文本截断规则无法生效，内容溢出卡片。

修复方案 #

只需要给.component-container添加min-width: 0，打破flex项的默认宽度限制，让它可以被压缩到小于内容宽度，这样内部子元素的宽度约束就能正常生效。

修改后的CSS：

.root-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  padding: 15px 0;
}

.component-container {
  flex: 1;
  display: flex;
  background-color: white;
  min-width: 150px;
  min-height: 100px;
  padding: 15px;
  border: 1px solid lightgrey;
  border-radius: 10px;
  /* 添加这一行，修复宽度约束问题 */
  min-width: 0;
}

.component-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

.component-label {
  align-self: flex-start;
  font-size: 14px;
  font-weight: 500;
  border-left: 3px solid red;
  padding-left: 5px;
  border-bottom: 1px solid lightgrey;
  margin-bottom: 40px;
  margin-top: 8px;
}

.stat-card-label {
  font-size: 14px;
}

.example-component {
  max-width: 100%;
  padding: 10px;
  border: 1px solid lightgrey;
  background-color: yellow;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

对应的HTML保持不变：

<div class="root-container">
  <div class="component-container">
    <div class="component-inner">
      <p class="component-label">Form Input</p>
      Input component goes here
    </div>
  </div>
  
  <div class="component-container">
    <div class="component-inner">
      <p class="component-label">Form Input</p>
      <div class="example-component">
        asdfj;askdjfj;laskjdf;laskjdf;laskdk aksdfka assadkasf sf
      </div>
    </div>
  </div>
  
  <div class="component-container">
    <div class="component-inner">
      <p class="component-label">Form Input</p>
      Another component
    </div>
  </div>
  <div class="component-container">
    <div class="component-inner">
      <p class="component-label">Form Input</p>
      Another component goes here
    </div>
  </div>
</div>

替代方案 #

如果不想修改.component-container，也可以给.component-inner添加overflow: hidden，同样能约束内部元素的宽度，让文本截断生效：

.component-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

内容的提问来源于stack exchange，提问作者Jo Momma