当文本很长时,如何在弹出显示中断字？

我需要创建一个响应式Web,以便父级的宽度是动态的.有两个弹性项目,一个是长(动态),另一个是短(静态).

我希望结果看起来像第二行,长文本被打破(或重叠时隐藏),短文本总是正确显示.

我尝试使用,flex-shrink: 0但似乎总是有溢出.

在这种情况下如何摆脱溢出？

我确实需要flex布局,不应该涉及js.

.parent {
  display: flex;
  flex-direction: row;
  width: 15rem;
  background: yellowgreen;
  padding: 10px;
  overflow: hidden;
}
.flex-item {
  width: 10em;
  padding: 10px;
  background: yellow;
  flex: 1 1 50%;
}
.block1 {
  background: red;
}
.block2 {
  background: orange;
}
.nos {
  flex-shrink: 0 !important;
}

  

    

      longlonglonglonglonglonglonglonglonglonglonglonglonglong
    
  
  

    

      Display
    
  




  

    

      longlonglonglonglong...
    
  
  

    

      Display