flexbox子项中的文本溢出

Question

我有两个主要部分：.main 和 .sidebar。

.row { display: flex; }
.main { flex: 1; }
.sidebar { flex: 0 0 20%; }

在 Chrome 中一切正常（第一张截图）。 .sidebar 是 20% 的宽度。但在 Firefox 中，即使我有 overflow: hidden（第二张截图），它也会将自身扩展到文本宽度。当我给 .latest-list li max-width: 0 时，它会缩小到宽度的 20%，但内容会消失（第三张截图）。

1. 截图：Chrome proper
2. 截图：Firefox not proper
3. 截图：Firefox half proper

简化示例

.row { display: flex; }
.main { flex: 1; }
.sidebar { flex: 0 0 20%; }
.sidebar a { overflow: hidden; white-space: nowrap; }

<div class="row">
  <div class="main">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus corporis doloribus, est consequuntur voluptatibus inventore illum laborum doloremque, quae aliquid magni sequi at? Impedit molestias ipsa veniam nobis iusto, quasi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis sapiente iusto, voluptate ex earum adipisci iste eveniet tenetur maxime tempora! Impedit rem beatae fugit iure adipisci nostrum, commodi et saepe?</div>
  <div class="sidebar">
  <a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quas ipsa blanditiis aut, a libero. Architecto delectus eveniet error a nisi officiis reprehenderit laborum porro dolor praesentium. Voluptatem, quaerat, quisquam!</a>
  </div>
</div>

在 Chrome 上 .sidebar 是 20% 的宽度，在 Firefox 上它需要空间用于文本。

Answer 1

尝试将overflow: hidden 切换到父容器。

而不是这个：

.sidebar { flex: 0 0 20%; }
.sidebar a { overflow: hidden; white-space: nowrap; }

试试这个：

.sidebar { flex: 0 0 20%; overflow: hidden; }
.sidebar a { white-space: nowrap; }