text-overflow ellipsis issue in nested element along with tooltip in flexbox column direction

I have a two column layout with left section taking 80% width and right section taking 20% width.

In the right section, I have a list of items to be displayed with texts that can be bigger than the right section width.

The first item, the parent div under which the text needs to be shown an ellipsis is a tooltip (demonstrated via bootstrap based tooltip) but while tooltip is shown the text is not shown with an ellipsis.

I have made this change only to the first item in the list just to illustrate the issue.

The other four list items are shown with an ellipsis as they are styled correctly under list-item class.

.container {
  display: flex;
  width: 100%;
}

.left {
  width: 80%;
  background-color: lightyellow;
  border: 1px solid black;
}

.right {
  flex-direction: column;
  width: 20%;
  background-color: palegreen;
  border: 1px solid black;
  .list {
    display: flex;
    flex-wrap: wrap;
    .list-item {
      margin: 1px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"></script>
<div class="container">
  <div class="left">left section content</div>
  <div class="right">
    <div class="list">
      <div class="list-item">
        <div data-bs-toggle="tooltip" title="This is a very big text that is not supposed to fit in the right pane">
          1. This is a very big text that is not supposed to fit in the right pane
        </div>
      </div>
      <div class="list-item">
        2. This is a very big text that is not supposed to fit in the right pane
      </div>
      <div class="list-item">
        3. This is a very big text that is not supposed to fit in the right pane
      </div>
      <div class="list-item">
        4. This is a very big text that is not supposed to fit in the right pane
      </div>
      <div class="list-item">
        5. This is a very big text that is not supposed to fit in the right pane
      </div>
    </div>
  </div>
</div>

I have referred this answer as it is almost similar to my issue but the solution does not work for me.

Can someone let me know what am I missing in my use case?

Solution

The styles are only applying to the .list-item, if you want the same effect in the div inside it just add this :

.container {
  display: flex;
  width: 100%;
}

.left {
  width: 80%;
  background-color: lightyellow;
  border: 1px solid black;
}

.right {
  flex-direction: column;
  width: 20%;
  background-color: palegreen;
  border: 1px solid black;

  .list {
    display: flex;
    flex-wrap: wrap;

    .list-item {
      margin: 1px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      
      div {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
}

<div class="container">
  <div class="left">left section content</div>
  <div class="right">
    <div class="list">
      <div class="list-item">
        <div data-bs-toggle="tooltip" title="This is a very big text that is not supposed to fit in the right pane">
          1. This is a very big text that is not supposed to fit in the right
          pane
        </div>
      </div>
      <div class="list-item">
        2. This is a very big text that is not supposed to fit in the right pane
      </div>
      <div class="list-item">
        3. This is a very big text that is not supposed to fit in the right pane
      </div>
      <div class="list-item">
        4. This is a very big text that is not supposed to fit in the right pane
      </div>
      <div class="list-item">
        5. This is a very big text that is not supposed to fit in the right pane
      </div>
    </div>
  </div>
</div>