How to prevent flex items overflows the flex container?

Question

I use flex layout in my code. I have a container with 4 items. When the title of the item is long, the lay out will be broken. where the last title not show completely on the secreen. I want the big title show like this: long title... you can see the code her:

https://jsfiddle.net/eu4j2uzd/

This is the Html:

<div class="tab-bar">
    <div class="tab-wrapper">
     <div class="text-tab">
        <div class="text-content">
          <div class="text-without-content">
              Lorem ipsom
         </div>
       </div>  
    </div>
   </div>
   <div class="tab-wrapper">
    <div class="text-tab">
       <div class="text-content">
         <div class="text-without-content">
              Lorem 
         </div>
       </div>  
    </div>
   </div>
   <div class="tab-wrapper">
    <div class="text-tab">
       <div class="text-content">
         <div class="text-without-content">
              Lorem ipsum
         </div>
       </div>  
    </div>
   </div>
   <div class="tab-wrapper">
    <div class="text-tab">
       <div class="text-content">
         <div class="text-without-content">
              Lorem ipsum dolor
         </div>
       </div>  
    </div>
   </div>
</div>

and this is the css :

.tab-bar {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow: hidden;
  height: 40px;
  background-color: #455560;
  padding: 0 8px;
  max-width: 376px;
}

.tab-wrapper {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    flex-grow: 1;
}

.text-tab {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    overflow: hidden;

    background-color: #455560;
    flex-grow: 1;
}

.text-content {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    padding: 0 8px;
    flex-grow: 1;
}

.text-without-content {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: white;
}