CSS Flexbox问题：弹窗受父级Flex容器影响致文本异常换行

问题根源 #

.row作为Flex容器，它的子元素.subdiv默认会以最小内容宽度（即内部最长单词/不可换行元素的宽度）作为自身的最小宽度限制。.popup是.subdiv的子元素，哪怕用了绝对定位，也会被这个宽度限制住，导致内部p标签只能在这个窄范围内换行，看起来就像只适配了最长单词的宽度。

解决办法 #

给.popup加上这个CSS属性：

.popup {
  width: max-content;
}

max-content会让弹窗的宽度自动适配内部p标签的完整文本宽度，完全包裹住所有内容，不用再依赖white-space: nowrap这种临时方案。

如果同时希望.subdiv本身不被Flex容器收缩得太窄，也可以给.subdiv加flex-shrink: 0，不过这不是修复弹窗的必要操作，核心还是给弹窗设置width: max-content。

内容的提问来源于stack exchange，提问作者713sean