Child component overflowing it's flex-container parent and not respecting a max-width of 100%

Issue

This is an over-simplified example of an issue I'm having in my app. I have a grid of flex cards. The cards are flex items with a min-width of 250px and the property flex: 1 so they take up as much space as possible on larger screens.

Inside these cards I'm creating UI components. They are usually at the root of the component block elements.

Here is the problem. One of my components in particular has text in it that when it exceeds it's div should truncate using the properties:

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

The problem is the text does not truncate. It make's the root div of the component grow to the point it's overflowing it's flex-item card. How can I fix this?

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

Solution

Ya, this is because you are applying this at example-component and inside here text is not overflowing. But if you apply your same styles to either component-inner or component-container it will work, this is because it is overflowing from your inner card or container component. Hope this helps; do ask question if not clear

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

Answered By - Sarim Ahmed