【CSS】Flex 布局中 overflow 失效的问题探讨

背景

因开发需要，父级元素 div 有 flex: 1; 属性，需要子元素 p 的文字超出范围的以省略号显示，正常配置后发现 p 元素的内容将上级元素撑开，而未正确隐藏。

后查阅资料解决，记录备忘。

问题描述

简化代码如下

<style>
  * {
    margin: 0;
    padding: 0;
  }
  .root {
    display: flex;
  }
  .root .left {
    flex: none;
    width: 100px;
    background-color: blueviolet;
  }
  .root .right {
    flex: 1;
    margin-left: 10px;
    background-color: burlywood;
  }
  .root .right .content {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>

<div class="root">
  <div class="left"></div>
  <div class="right">
    <p class="content">石室诗士施氏，嗜狮，誓食十狮。施氏时时适市视狮。十时，适十狮</p>
  </div>
</div>

预期 p.content 元素内容超出的部分以省略号显示；实际文字未隐藏，而是将父级元素撑开，使父级元素宽度超过 100%。

解决方案

以上例为基础，列举可用方案如下：

1. 父级 div.right 设置属性 overflow: hidden; ；
2. 父级 div.right 设置属性 min-width 为常量（非百分比），建议设为 0，推荐；
3. 父级 div.right 设置属性 max-width 为常量（非百分比），不建议使用该方法，因为适配问题，难以计算合适的常量；
4. 父级 div.right 设置属性 width 为常量（非百分比），建议设为 0；

问题解析

目前网上搜罗的资料没有合理的解释，仅提供了解决方案，而未说明该方法为什么可以解决此问题。

参考

1. flex 布局下 overflow 失效问题
2. Scrolling a flexbox with overflowing content