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%，但内容消失了（第三张截图）。

截图：Chrome proper
截图：Firefox not proper
截图：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 上文本需要 space。

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

flexbox 子项中的文本溢出

Text overflow in flexbox child

css

overflow

flexbox

简化示例