@css flex 布局子内容将父元素撑开

flex 布局子内容将父元素撑开

遇到的问题：

需要显示的文本是通过富文本编辑器提交是文本（包含了p标签），展示时通过flex布局实现。如下图：

但是通过flex布局实现后发现文本内容过长时将后半部分整体撑开了，导致整个卡片内容被撑开了

解决：

通过给富文本编辑器生成的p标签设置flex:1;width:0px;的方式使整个p标签的宽度由flex属性去决定
（也就是有p标签的父元素宽度所决定），再通过设置溢出隐藏的css属性实现溢出隐藏。
overflow: hidden; white-space: nowrap; word-break: break-all;

最终效果，成功解决flex布局下父元素被撑开。