Flexbox works on Firefox but not on Edge?

Question

I am working on the footer of a frontend mentor project. The same HTML and CSS produces different pages on Firefox and Edge. The one the Firefox is the correct one. Can you please explain why this is happening ? I have attached the results after the code.

@import url("https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;600&display=swap");
html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  line-height: 1.3;
  font-family: "Bai Jamjuree", sans-serif;
  color: #9fabb2;
}

p.medium {
  font-size: 1rem;
  line-height: 1.5;
}

@media (min-width: 1000px) {
  p.medium {
    font-size: 1.125rem;
    line-height: 1.75;
  }
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

footer {
  background-color: #f6f7f9;
  margin-top: calc(100vh - 150px);
}

footer .footer_logo {
  height: 57px;
  width: 57px;
}

footer .footer {
  height: 150px;
}

footer .footer__container {
  display: grid;
  grid-template-columns: 1fr 4fr 1fr;
  max-width: 1110px;
  margin: auto;
}

footer .col-1 {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

footer .col-3 {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

footer .col-3 img {
  margin-right: 24px;
}

.col-2 {
  border: 1px solid red;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.col-2 .link {
  border: 1px solid blue;
  display: flex;
  align-items: end;
  display: -webkit-box;
  -webkit-box-align: end;
}

.col-2 a {
  border: 1px solid green;
}

<!-- Footer -->
<footer>
  <div class="footer footer__container">
    <div class="col-1">
      <img class="footer_logo" src="logo.svg">
    </div>
    <div class="col-2">
      <div class="link">
        <a href="#">FAQs</a>
      </div>
      <div class="link">
        <a href="#">Privacy Policy</a>
      </div>
      <div class="link">
        <a href="#">Install Guide</a>
      </div>
      <div class="link">
        <a href="#"></a>
        <!--This is supposed to be empty-->
      </div>
      <div class="link">
        <a href="#">Conatct Us</a>
      </div>
      <div class="link">
        <a href="#">Press Kit</a>
      </div>
    </div>
    <div class="col-3">
      <img src="icon-facebook.svg">
      <img src="icon-twitter.svg">
      <img src="icon-instagram.svg">
    </div>
  </div>
</footer>
<!-- Footer Ends-->

Firefox

Edge

I observed that in CSS selctor .col-2 .link if I add:

.col-2 .link {
  border: 1px solid blue;
  display: flex;
  align-items: end;
  display: -webkit-box;      <------------   *THIS LINE AND*
  -webkit-box-align: end;    <------------   *THIS LINE HERE* 
}

Then Edge also makes the webpage same as Firefox.

WHY ARE THE STYLES

display: flex;
align-items: end;

NOT WORKING ON EDGE

Michael Benjamin · Accepted Answer · 2021-02-03T15:39:37.320

It boils down to this: align-items: end is supported by Firefox but not Edge.

You still need to use align-items: flex-end for full cross-browser support.

Here's the code block in question:

.col-2 .link {
  border: 1px solid blue;
  display: flex;
  align-items: end;
  display: -webkit-box;
  -webkit-box-align: end;
}

In a declaration block, the cascade will pick the last property, when the property is declared multiple times.

So display: flex is ignored because the cascade will settle on display: -webkit-box.

For cross axis alignment, -webkit-box-align: end works in both Firefox and Edge.

No prefixes are needed. Both Firefox and Edge support Flex Layout.

The problem is actually quite simple to fix, and it has nothing to do with prefixes.

align-items: end is supported by Firefox, but not Edge.
You still need to use align-items: flex-end for full cross-browser support.

The end value is a feature of the CSS Box Alignment Module, which doesn't yet have full support among the major browsers. So use flex-end, which is the specific value defined in the CSS Flexible Box Layout Module. The "flex-" prefixed values will eventually be obsolete, but are obviously still necessary at this time.

score -1 · Answer 2 · answered Feb 03 '21 at 08:24

Using prefixes will fix your problem.

@import url("https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;600&display=swap");
html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  line-height: 1.3;
  font-family: "Bai Jamjuree", sans-serif;
  color: #9fabb2;
}

p.medium {
  font-size: 1rem;
  line-height: 1.5;
}

@media (min-width: 1000px) {
  p.medium {
    font-size: 1.125rem;
    line-height: 1.75;
  }
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

footer {
  background-color: #f6f7f9;
  margin-top: calc(100vh - 150px);
}

footer .footer_logo {
  height: 57px;
  width: 57px;
}

footer .footer {
  height: 150px;
}

footer .footer__container {
  display: grid;
  grid-template-columns: 1fr 4fr 1fr;
  max-width: 1110px;
  margin: auto;
}

footer .col-1 {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

footer .col-3 {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

footer .col-3 img {
  margin-right: 24px;
}

.col-2 {
  border: 1px solid red;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.col-2 .link {
  border: 1px solid blue;
  
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox; /* for IE */
  display: flex;

  align-items: end;
  display: -webkit-box;
  -webkit-box-align: end;
}

.col-2 a {
  border: 1px solid green;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
  <link rel="stylesheet" href="style.css">
  <title>Clipboard</title>
</head>

<body>
  <!-- Footer -->
  <footer>
    <div class="footer footer__container">
      <div class="col-1">
        <img class="footer_logo" src="logo.svg">
      </div>
      <div class="col-2">
        <div class="link">
          <a href="#">FAQs</a>
        </div>
        <div class="link">
          <a href="#">Privacy Policy</a>
        </div>
        <div class="link">
          <a href="#">Install Guide</a>
        </div>
        <div class="link">
          <a href="#"></a>
          <!--This is supposed to be empty-->
        </div>
        <div class="link">
          <a href="#">Conatct Us</a>
        </div>
        <div class="link">
          <a href="#">Press Kit</a>
        </div>
      </div>
      <div class="col-3">
        <img src="icon-facebook.svg">
        <img src="icon-twitter.svg">
        <img src="icon-instagram.svg">
      </div>
    </div>
  </footer>
  <!-- Footer Ends-->
</body>

</html>

Flexbox works on Firefox but not on Edge?

2 Answers2