Flex items cause parents to be wider than 100% in Firefox

Question

I have a basic layout based on flexbox with one speciality. I have a navigation module that contains many elements and should scroll horizontally when the screen is too narrow to display all the element.

Everything works fine but not in Firefox. Here the navigation causes all its parents to be wider than the screen and produces a horizontal scrollbar for the whole page.

Below is my code. How can I get the same result in Firefox as I have it eg. in 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

An initial setting of flex items is `min-width: auto`. This means that an item cannot, by default, be shorter than its content. Although this behavior is defined in the spec, some browsers override this on their own (which is why your layout works in Chrome)... — Michael Benjamin, Jun 20 '17 at 11:12
... but for other browsers (such as FF) who adhere strictly to spec guidance, you need to override this initial setting. The standard way is with `min-width: 0` or `overflow` with any value other than `visible`. — Michael Benjamin, Jun 20 '17 at 11:13
In your code, two flex items require the override: `body` and `.view` ([**revised codepen**](https://codepen.io/anon/pen/MomWrN)) — Michael Benjamin, Jun 20 '17 at 11:15
@Huelfe I used flex: 1 to to create an application-like layout that blows up the layout to the full height of the browser and only some inner containers are scrollable. — Carina Skladal, Jun 20 '17 at 11:25
@CarinaSkladal, your layout and code look good. In fact, very well structured. The only issue to address is the `min-width` default. I don't think there are any problems relating to `flex: 1` or `box-sizing`. — Michael Benjamin, Jun 20 '17 at 11:28

Flex items cause parents to be wider than 100% in Firefox

0 Answers0