flexbox child

Question

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

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

在Chrome中一切都很好（第1张截图）。 .sidebar宽度为20％。但是在Firefox中，它扩展到文本宽度，即使我有overflow: hidden（第二个截图）。当我给.latest-list li max-width: 0时，它会缩小到宽度的20％，但内容会消失（第3个屏幕截图）。

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