Flexbox flex property seems to work only on Firefox, not Chrome nor Edge

Question

I am trying to set a flex item to the bottom of the page. I got it working in Firefox using flex: 1 1 but this has no effect in Chrome and Edge. As seen in the images below, the flex item is at the bottom of the page in Firefox, but in Chrome and Edge there is a gap below it. I want Chrome and Edge to have the same effect on the flex item as Firefox. I did try adding the browser prefixes but they did not change anything. I have the outer container as a flexbox, so the marquee component is a flex item. I used a grid inside the marquee component.

Firefox (the result I want for all browsers):

Chrome and Edge (both have the same result):

App.css

.container {
  background-color: rgb(177, 202, 183);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-left: 3em;
  padding-right: 3em;

}

.layout {
  height: 20vh;
  margin: 20px 5%;
}

.navlinks {
  display: flex;
  flex-direction: column;
  margin-top: .8em;
}

.navlinks__link {
  color: #fff;
  text-decoration: none;
  font-family: Helvetica, sans-serif;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.86;
  letter-spacing: normal;
}

/* marquee css */

.marquee {
  height: auto;
  margin: 20px 5%;
  margin-bottom: 0;
  display: grid;
  grid-template-areas: "headline subhead"
                       "cta cta";
  grid-template-rows: minmax(20rem, auto) minmax(10rem, auto);
  column-gap: 3rem;
  flex: 1 1;
  -webkit-flex: 1 1;
}

.headline {
  grid-area: headline;
  align-self: center;
  color: #fff;
  font-family: Helvetica, sans-serif;
  font-size: 5.25rem;
  line-height: 5.25rem;
  letter-spacing: -2.2px;
}

.subhead {
  grid-area: subhead;
  align-self: center;
  color: #fff;
  font-size: 0.875rem;
  line-height: 1.625rem;
  letter-spacing: normal;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
}

/*cta css*/

.cta {
  background-color: #fff;
  color: #000;
  grid-area: cta;
  display: flex;
  flex-direction: row;
}

.cta > p {
  position: relative;
  align-self: center;
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 2rem;
  letter-spacing: -0.63px;
}

HTML (I used React so this code is from the inspector, also the undefined class is just for the background so don't worry about it)

If you provide the snippet, it will be easy to help you find a solution to the problem. since you are using react, you can take your HTML and css separately and create a snippet. — Dulani Maheshi, Mar 28 '21 at 03:46
https://stackoverflow.com/questions/54973109/different-implementation-of-flexbox-in-firefox-and-chrome this may help you. — Dulani Maheshi, Mar 28 '21 at 03:46

score 0 · Answer 1 · answered Mar 28 '21 at 05:33

0

Actually I have seemed to solve the problem by changing my top and bottom margins to vh and making sure the total vh value of all elements is equal to 100vh.

answered Mar 28 '21 at 05:33

alti21

127
2
11

Flexbox flex property seems to work only on Firefox, not Chrome nor Edge

1 Answers1