Issue with css flex-box flex-grow property combined with a text-overflow ellipsis

Question

Context

I'm currently working on a vuejs treeview component. Each treeview node is divided into three parts :

1. The icons part
2. The content part
3. The controls part

Icons part is dedicated to the node "visual icon" and the extend button which show child nodes. The content part is the node "text" or the node name. And the control part is for some dedicated mechanics.

The problem

I want the content part width to be automatically calculated with the flex-grow: 1 property. But in the content part there is some text with text-overflow: ellipsis property that force the content div to become bigger than it should be when the text overflow the div width instead of "ellipsing".

Simplified code

<!-- Global wrapper -->
<div
  style="width: 300px; height: 40px; display: flex;"
>
  <!-- Icons part -->
  <div 
    style="height: 100%; padding: 10px; box-sizing: border-box;"
  >
    <!-- Here there is the icons part content -->
  </div>
  
  <!-- Content part -->
  <div 
    style="height: 100%; flex-grow: 1; padding: 5px; box-sizing: border-box;"
  >
   <!-- Node text div -->
   <div 
     style="width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;"
   >
     This is some random text that make the div become bigger than it should be
   </div>
  </div>

  <!-- Controls part -->
  <div 
    style="height: 100%; padding: 10px; box-sizing: border-box;"
  >
    <!-- Here there is the controls part content -->
  </div>
</div>

Results

Here is a coarse picture of the result i have vs the result i expect to have.

Thank for anybody taking time to explain me why is it overfloating like that and how to fix it.