css - 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; }