Flex项目导致父母在Firefox中超过100％

Question

我有一个基于flexbox的基本布局，有一个专业。我有一个包含许多元素的导航模块，当屏幕太窄而无法显示所有元素时，它应该水平滚动。

一切正常，但不适用于Firefox。这里导航使其所有父项都比屏幕宽，并为整个页面生成一个水平滚动条。

以下是我的代码。如何在Firefox中获得与我相同的结果，例如。在Chrome？

html,
body,
.view {
  display: flex;
  flex: 1;
  width: 100%;
}

html {
  height: 100vH;
}

body {
  flex-direction: column;
  margin: 0;
}

header {
  background-color: red;
}

.content {
  display: flex;
  flex: 1;
}

.sidebar {
  background-color: green;
  flex: 0 0 10rem;
}

.list {
  background-color: blue;
  flex: 0 0 10rem;
}

.view {
  flex-direction: column;
  width: calc(100% - 20rem);
}

.selector {
  display: flex;
  background-color: yellow;
  flex: 0 0 5rem;
  overflow: auto;
}

.selector__item {
  flex: none;
  width: 300px;
  height: 200px;
}

.selector__item:nth-of-type(odd) {
  background: #cccc00;
}

.grid {
  background-color: pink;
  flex: 1;
}

<header>content</header>
<div class="content">
  <div class="sidebar">
    Sidebar
  </div>
  <div class="list">
    List
  </div>
  <div class="view">
    <div class="selector">
      <div class="selector__item"></div>
      <div class="selector__item"></div>
      <div class="selector__item"></div>
      <div class="selector__item"></div>
      <div class="selector__item"></div>
      <div class="selector__item"></div>
      <div class="selector__item"></div>
      <div class="selector__item"></div>
      <div class="selector__item"></div>
      <div class="selector__item"></div>
      <div class="selector__item"></div>
      <div class="selector__item"></div>
    </div>
    <div class="grid">
      Grid
    </div>
  </div>
</div>

https://codepen.io/wubbel/pen/vZmBYo