如何防止弹性物品溢出弹性容器？

Question

我在代码中使用flex布局。我有一个容器有4个项目。当项目的标题很长时，布局将被打破。最后一个标题在secreen上没有完全显示。我想要这样的大标题秀：长标题......你可以看到她的代码：

https://jsfiddle.net/eu4j2uzd/

这是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>

这是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;
}