子组件溢出其弹性容器父组件并且不遵守 100% 的最大宽度

Question

这是我的应用程序中遇到的问题的一个过于简单的示例。我有一个弹性卡网格。这些卡片是最小宽度为 250px 且属性 flex: 1 的弹性项目，因此它们在较大的屏幕上占用尽可能多的空间。

在这些卡片中我正在创建 UI 组件。它们通常位于组件块元素的根部。

问题就在这里。我的一个组件特别包含文本，当它超过它的 div 时，应该使用以下属性截断：

white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

问题是文本没有被截断。它使组件的根 div 增长到溢出弹性项目卡的程度。我该如何解决这个问题？

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

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

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

Answer 1

是的，这是因为您在示例组件中应用了这个，并且这里的文本没有溢出。 但是，如果您将相同的样式应用于组件内部或组件容器，它将起作用，这是因为它从内部卡或容器组件溢出。希望这可以帮助;如果不清楚请提问

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

.component-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

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