Why is Firefox not applying padding-bottom to flex container?

HTML & CSS
1

Hi,

I have the following HTML/CSS taken from a theme I am working with.

Problem: Chrome applies a padding of 4rem to (all sides of) the <main> element, whereas Firefox applies a 4rem padding to the top, left and right of the <main> element, but not the bottom.

Question: How can I make Firefox apply the padding to the bottom of the <main> element?

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
    <title>Test</title>
    <style>
      * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
      }

      html, body {
        margin: 0;
        padding: 0;
      }

      html {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
        font-size: 1.25rem;
        line-height: 1.5;
      }

      p {  margin-bottom: 1rem; }

      body {
        display: flex;
        flex-direction: row;
        height: 100vh;
        overflow: auto;
      }

      body > * {
        max-height: 100vh;
        overflow: auto;
      }

      .container {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        padding: 4rem;
        height: 100vh;
      }

      .container > .content { flex-grow: 1; }

      .content {
        background: #fff;
        color: #515151;
        padding: 2rem;
      }

      .container > * {
        max-width: 38rem;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <main class="container">
      <div class="content">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates dolore similique, facere quisquam sed beatae, aperiam at minima eum eveniet accusantium cupiditate iusto mollitia, perferendis sit temporibus quo odio aspernatur? Unde ex recusandae minus delectus, officia dolore voluptate at animi dicta assumenda distinctio. Illum laborum accusantium ratione delectus aliquid possimus deserunt vitae qui soluta dolores modi, quas, molestias, iure deleniti.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates dolore similique, facere quisquam sed beatae, aperiam at minima eum eveniet accusantium cupiditate iusto mollitia, perferendis sit temporibus quo odio aspernatur? Unde ex recusandae minus delectus, officia dolore voluptate at animi dicta assumenda distinctio. Illum laborum accusantium ratione delectus aliquid possimus deserunt vitae qui soluta dolores modi, quas, molestias, iure deleniti.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates dolore similique, facere quisquam sed beatae, aperiam at minima eum eveniet accusantium cupiditate iusto mollitia, perferendis sit temporibus quo odio aspernatur? Unde ex recusandae minus delectus, officia dolore voluptate at animi dicta assumenda distinctio. Illum laborum accusantium ratione delectus aliquid possimus deserunt vitae qui soluta dolores modi, quas, molestias, iure deleniti.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates dolore similique, facere quisquam sed beatae, aperiam at minima eum eveniet accusantium cupiditate iusto mollitia, perferendis sit temporibus quo odio aspernatur? Unde ex recusandae minus delectus, officia dolore voluptate at animi dicta assumenda distinctio. Illum laborum accusantium ratione delectus aliquid possimus deserunt vitae qui soluta dolores modi, quas, molestias, iure deleniti.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates dolore similique, facere quisquam sed beatae, aperiam at minima eum eveniet accusantium cupiditate iusto mollitia, perferendis sit temporibus quo odio aspernatur? Unde ex recusandae minus delectus, officia dolore voluptate at animi dicta assumenda distinctio. Illum laborum accusantium ratione delectus aliquid possimus deserunt vitae qui soluta dolores modi, quas, molestias, iure deleniti.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates dolore similique, facere quisquam sed beatae, aperiam at minima eum eveniet accusantium cupiditate iusto mollitia, perferendis sit temporibus quo odio aspernatur? Unde ex recusandae minus delectus, officia dolore voluptate at animi dicta assumenda distinctio. Illum laborum accusantium ratione delectus aliquid possimus deserunt vitae qui soluta dolores modi, quas, molestias, iure deleniti.</p>
      </div>
    </main>
  </body>
</html>

Grateful for any help.

2

When I do inspect element in Firefox on <main>, I get the 4rem padding on all four sides.

3

Oh. Are you seeing the padding applied?

This is what I see in Chrome:

850×409 294 KB

And this is what I see in Firefox:

900×318 295 KB

Do you see something similar, or is the bottom padding applied in both cases for you?

4

No, you’re right. I checked the layout in inspect element, but the content seems to be overflowing that. Apparently it is something to do with the overflow property that Firefox interprets differently than the other browsers.

1 Like
5

Oh ok, thanks :slight_smile: At least I’m not going mad.

It would be great to find a way to get it to display the padding.

6

I think it’s to do with you setting those full-screen heights, I’m not sure of your purpose for that.

7

Hmm, yeah. Removing those seemed to make FF apply the padding.

Lol, me neither. As mentioned it’s a theme and I just tried making the same changes to the theme and that makes the sidebar scroll (when it should be sticky).

You can see a more complete example here: https://fongandrew.github.io/hydeout/

8

Strange, I did have the bottom padding working in FF after fiddling with the code, commenting bits of css out.
Then undid the changes to see what it was, now I can’t make it work again. :grimacing:

1 Like
9

OK, if I comment out all three height/max-height rules, I get bottom padding.
Was this meant to be a horizontal theme?
Just trying to make sense of the flex and height rules.

2 Likes
10

Just saw the link now, fixed sidebar is the reason.

11

I found this solution:

  .container::after {
	  display: block;
	  content: '';
	  padding: 4rem 0 0 0;
}
3 Likes
12

This should be all that is needed

      body {
        display: flex;
        flex-direction: row;
        min-height: 100vh;
      }

      .container {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        padding: 4rem;
        background:red;
      }

Full code with some p tags removed to show it working with minimal content


<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
    <title>Test</title>
    <style>
      html, body {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      *, *:before, *:after {
        box-sizing: inherit;
      }
      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
        font-size: 1.25rem;
        line-height: 1.5;
      }
      p {
        margin-bottom: 1rem;
        margin: 1rem 0;
      }

      body {
        display: flex;
        flex-direction: row;
        min-height: 100vh;
      }

      .container {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        padding: 4rem;
        background:red;
      }

      .container > .content {
        flex-grow: 1;
        background: #fff;
        color: #515151;
        /*padding: 2rem;  */
      }

      .container > * {
        max-width: 38rem;
      }
    </style>
  </head>
  <body>
    <main class="container">
      <div class="content">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates dolore similique, facere quisquam sed beatae, aperiam at minima eum eveniet accusantium cupiditate iusto mollitia, perferendis sit temporibus quo odio aspernatur? Unde ex recusandae minus delectus, officia dolore voluptate at animi dicta assumenda distinctio. Illum laborum accusantium ratione delectus aliquid possimus deserunt vitae qui soluta dolores modi, quas, molestias, iure deleniti.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates dolore similique, facere quisquam sed beatae, aperiam at minima eum eveniet accusantium cupiditate iusto mollitia, perferendis sit temporibus quo odio aspernatur? Unde ex recusandae minus delectus, officia dolore voluptate at animi dicta assumenda distinctio. Illum laborum accusantium ratione delectus aliquid possimus deserunt vitae qui soluta dolores modi, quas, molestias, iure deleniti.</p>
      </div>
    </main>
  </body>
</html>
5 Likes
13

Then remove the real padding, or you get double in Chrome.

padding: 4rem 4rem 0;
2 Likes
14

The problem is that overflow should be clipped at the padding edge according to the specs but Chrome decides to clip at the content edge instead. So Firefox and Edge would seem to be correct in their behaviour.

The rules are conflicting anyway as this will never work.

  .container {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        padding: 4rem;
        height: 100vh;
      }

What happens when the content is greater than 100vh?

Look at Ray’s example for an easier and more straight forward solution :slight_smile:

5 Likes
15

I suspected overflow was playing a role in this, along with a specs conflict with one of the browsers.

I didn’t look at the specs so I wasn’t sure which browser was acting up. :slight_smile:

1 Like
16

Thank you everyone. I just returned to the PC and am working through the thread now. I’ll let you know how I get on.

2 Likes
17

I tried this and I’m afraid Firefox still cuts off the bottom padding.

Unfortunately, the design is a little more complicated (see link in post#7) and I couldn’t get this to work either. I’m sure I’m missing something obvious, but the CSS is written using Sass and is spread out over multiple files and through multiple media queries. This makes it very dense (for me) to parse and work out what I might be doing wrong.

This worked exactly as I wanted. Thank you!

2 Likes
18

On that page all you needed to do was remove the padding:4rem from .container and apply it to .content instead and then firefox will be fine and it will look the same as before.

Rays example is fine in Firefox so you must have missed something along the way :slight_smile:

When using overflow just add the padding to inner elements.

e.g.

2 Likes
19

Aw man, you’re right! That works. Thank you.

As a point of interest, it was actually the Sass tripping me up. I tried:

.container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;

  > .content {
    flex-grow: 1;
  }
}

.content {
  background: $body-bg;
  color: $body-color;
  padding: $section-spacing*2;
}

which, as far as I could tell should apply the padding to the content div, yet this didn’t work.

Changing it to:

.container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;

  > .content {
    flex-grow: 1;
    padding: $section-spacing*2;
  }
}

.content {
  background: $body-bg;
  color: $body-color;
}

Had the desired effect.

Sass - yet another thing I need to learn.

1 Like
20

Yes I am still yet to be convinced that pre-processors are any use at all in most designs. They only seem to confuse things and make it harder. Variables are good but we have them in CSS now.:slight_smile:

For creating complex demos with hundreds of similar (repeating) rules then yes a pre-processor can automate the process and be very useful. However most sites simply do not require the complexity that pre-processors bring.

2 Likes