I am creating a component which is a container of key-value rows.

I have an issue that the value text is pushing action buttons after it in a flexbox, even though it should make the text smaller to fit the action buttons due to text-ellipsis.

Why doesn’t it make the value text smaller to fit the action buttons?

Let’s imply that the red 24x24 squares are action buttons for the demo.

I created a JSFiddle but it doesn’t let me paste it here.

here’s the HTML:

<div class="container">
  <div class="enrichment-key-value-variant-container">
    <div class="main-wrapper">
      <div class="key-container">
        <div class="button"></div>
        <div class="key text-ellipsis typo-paragraph-4">My Key</div>
      </div>
      <div class="value-container typo-paragraph-4-bold text-ellipsis">
        This is a very long string text. Its not that long though but you got the point
      </div>
    </div>
    <div class="actions-wrapper">
      <div class="button"></div>
      <div class="button"></div>
    </div>
  </div>
</div>

and SCSS:

.container {
  width: 304px;
  border-radius: 4px;
  padding: 12px;
  background: black;
  box-shadow: 0px 4px 16px 0px #000000B8;
color: white;
  .enrichment-key-value-variant-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .main-wrapper {
      width: 100%;
      display: flex;
      align-items: center;

      .key-container {
        display: flex;
        gap: 4px;
        align-items: center;

        .key {
          width: 72px;
          min-width: 72px;
          max-width: 72px;
          color: $neutral-300;
        }
      }

      .value-container {
        flex-grow: 1;
        overflow: hidden;

        .value {
          color: $neutral-100;
        }
      }
    }

    .actions-wrapper {
      display: flex;
      gap: 4px;
      align-items: center;
      flex-shrink: 0;
    }
  }
}
.button {
  width: 24px;
  height:24px;
  background:red;
  display:block;
}

.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}