html中flex下文字超出父级元素宽度

现象：

修改前效果

上图中，flex元素下分成了左右两块内容，左侧内容块定宽，右侧的文本块内容的宽度超出了父级元素的边界，修改前的代码如下：

  
  
  
  



  

    
llkdkkdkk
    
ooiljljljljljljafgdklfklajdfljljohooriuei
  

我现在想要右侧的内容块自动占据父级余下的空间，如果内容过长则换行显示。

解决方法：

给右侧的文本块加多两个样式即可。

....
  .right{
    flex: auto;
    background: greenyellow;
    
    word-wrap: break-word;
    overflow: hidden;
  }
....

修改后效果