3

I'm working on a flexbox layout and I have an issue where the flex items will overflow the container in firefox only. Here's as stripped down an example as I could come up with (sorry it's not super minimal, I'm unsure what's causing the issue, so it's hard to know what I can remove):

<div class="css-190tu11">
  <h1 class="css-1qqir8k">Blah</h1>
  <div class="css-131b9cy">
    <div class="css-1suni8j">
      <a class="css-yq2t95" href="some-url">
        <span class="icon icon-register css-nwymqb" aria-hidden="true"></span>
        <h2 class="css-1892n22">Title</h2>
        <div class="css-kgza95">Description</div>
      </a>
      <div class="css-kujdaf">
        Some special thing
      </div>
    </div>
    <div class="css-1suni8j">
      <a class="css-yq2t95" href="some-url">
        <span class="icon icon-register css-nwymqb" aria-hidden="true"></span>
        <h2 class="css-1892n22">Title</h2>
        <div class="css-kgza95">Description</div>
      </a>
      <div class="css-dkez8"></div>
    </div>
    <div class="css-1suni8j">
      <a class="css-yq2t95" href="some-url">
        <span class="icon icon-register css-nwymqb" aria-hidden="true"></span>
        <h2 class="css-1892n22">Title</h2>
        <div class="css-kgza95">Description</div>
      </a>
      <div class="css-dkez8"></div>
    </div>
    <div class="css-1suni8j">
      <a class="css-yq2t95" href="some-url">
        <span class="icon icon-register css-nwymqb" aria-hidden="true"></span>
        <h2 class="css-1892n22">Title</h2>
        <div class="css-kgza95">Description</div>
      </a>
      <div class="css-dkez8"></div
    </div>
  </div>
</div>

And the CSS:

.css-190tu11,
[data-css-190tu11] {
  padding: 12px 48px 24px 48px;
  border: solid 1px #e0e0e0;
}
.css-1qqir8k,
[data-css-1qqir8k] {
  font-size: 24px;
  font-weight: 300;
  margin-bottom: 18px;
  margin-top: 0;
}
.css-131b9cy,
[data-css-131b9cy] {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.css-131b9cy > *,
[data-css-131b9cy] > * {
  flex: 0 1 auto;
  margin-left: 0;
  margin-right: 0;
}
.css-131b9cy > *:not(:first-child),
[data-css-131b9cy] > *:not(:first-child) {
  margin-left: 10px;
}
.css-131b9cy > *:not(:last-child),
[data-css-131b9cy] > *:not(:last-child) {
  margin-right: 10px;
}

.css-1suni8j,
[data-css-1suni8j] {
  display: flex;
  background-color: white;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  max-width: 186px;
  min-width: 120px;
  height: 240px;
}
.css-1suni8j > *,
[data-css-1suni8j] > * {
  margin-top: 0;
  margin-bottom: 0;
}
.css-1suni8j > *:not(:first-child),
[data-css-1suni8j] > *:not(:first-child) {
  margin-top: 10px;
}
.css-1suni8j > *:not(:last-child),
[data-css-1suni8j] > *:not(:last-child) {
  margin-bottom: 10px;
}

.css-yq2t95,
[data-css-yq2t95] {
  flex: 1;
  justify-content: space-between;
  flex-direction: column;
  display: flex;
}
.css-yq2t95 > *:last-child,
[data-css-yq2t95] > *:last-child {
  flex: 0 1 auto;
}
.css-yq2t95 > *,
[data-css-yq2t95] > * {
  margin-top: 0;
  margin-bottom: 0;
}
.css-yq2t95 > *:not(:first-child),
[data-css-yq2t95] > *:not(:first-child) {
  margin-top: 5px;
}
.css-yq2t95 > *:not(:last-child),
[data-css-yq2t95] > *:not(:last-child) {
  margin-bottom: 5px;
}

.css-nwymqb,
[data-css-nwymqb] {
  transition: all 0.5s ease;
  border-radius: 50%;
  display: block;
  margin-left: auto;
  border: 1px solid #0070ba;
  height: 60px;
  width: 60px;
  font-size: 30px;
  line-height: 54px;
  margin-right: auto;
}

.css-1892n22,
[data-css-1892n22] {
  font-weight: normal;
  flex: 0 1 auto;
  color: inherit;
  padding: 0;
  font-size: 16px;
  height: 80px;
}
.css-kgza95,
[data-css-kgza95] {
  font-weight: normal;
  font-size: 11px;
  color: #333333;
  height: 76px;
}
.css-kujdaf,
[data-css-kujdaf] {
  min-height: 36px;
  background-image: linear-gradient(93deg, #1446a0, #0070ba);
  width: 100%;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}
.css-dkez8,
[data-css-dkez8] {
  min-height: 36px;
}

Here's what it looks like in Chrome and Safari (this is what I want it to look like):

Chrome and Safari

And here's what it looks like in Firefox:

Firefox

Even Internet Explorer 10 shows it the way I want! (Can't verify in the codepen because I removed vendor prefixes, but it works in my app).

Here's a codepen for this.

Thanks for any help!

kentcdodds
  • 27,113
  • 32
  • 108
  • 187

2 Answers2

5

Turns out that the element that is overflowing needs to have a min-height: 0 on it. I'm not sure why, but by putting that on .css-yq2t95 everything's working nicely. Thanks everyone for pitching in!

kentcdodds
  • 27,113
  • 32
  • 108
  • 187
  • 1
    Explanation: you have specified heights on all of the children of `.css-yq2t95`, and in Firefox (and Edge 14), it takes on exactly the sum of their heights/margins/borders (and pushes its sibling, the "special thing" button), out of view. By default, vertical flex items (like `.css-yq2t95`) can shrink, but not below their min-content heights -- which in this case is the sum of the specified heights. If you add `min-height:0`, though, that suppresses the special min-height behavior and allows it to shrink. – dholbert Mar 31 '17 at 02:01
  • 1
    And then since `.css-yq2t95` is *itself* a flex container, it prompts its children to shrink, which they're able to do because their own min-content heights are less than their (too-large) specified heights. – dholbert Mar 31 '17 at 02:02
  • 1
    You should consider reporting Chrome/Safari's behavior here as a bug in their respective bug trackers! (or at least in one of them) :) – dholbert Mar 31 '17 at 02:03
  • 1
    Along with (or instead of) your `min-height:0` fix, you might want to just use smaller specified heights on `.css-yq2t95`'s children in the first place. (e.g. you could use the heights that those elements *actually end up with* after the shrinking that you're depending on takes place.) (Though depending on how much content you expect those elements to have, maybe best not to give them too small of a height or else their content might overflow.) – dholbert Mar 31 '17 at 02:06
  • @dholbert, bingo, the issue is that the content will be translated so it's really difficult for me to know how big that content will end up being. – kentcdodds Mar 31 '17 at 20:27
  • Possibly related to this bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1043520 – CletusW Jun 08 '17 at 17:34
  • Just saved my bacon. Thank you! – idungotnosn Dec 15 '17 at 17:12
0

The container with the class css-1suni8j has a fixed height (240px), and also the elements in there (h2, DIV) have fixed widths which makes the last DIV with the button go under its border. If you erase the 240px height, it will remain inside the container.

Since there is a varying number of elements in your columns and justify-content is space-between, there's no way to keep the other elements a t the same height.

Johannes
  • 64,305
  • 18
  • 73
  • 130
  • Thanks for the answer. Why does it work ok in Chrome/Safari/IE10? – kentcdodds Mar 31 '17 at 00:49
  • probably because of the way they interpret the flexbox parameters – Johannes Mar 31 '17 at 00:50
  • Is there any way to get firefox to interpret them the same way, or provide the options differently? – kentcdodds Mar 31 '17 at 00:50
  • I am thinking of using `justify-content: flex-start` on these containers, with a not-defined height (i.e. erasing the 240px height), but for some reason that doesn't keep the child elements' heights fixed. – Johannes Mar 31 '17 at 00:59