CODEWITHSUNDEEP
htmlcssgoogle-chromefirefoxflexbox
minifigmaster125
minifigmaster125

Reputation: 175

Flexbox difference in Firefox vs Chrome?

I've read some pieces on the subject of differences in how flexbox is displayed in different browsers, but none of it is helping me fix my layout issues. I've implemented my own basic flexbox grid. Here is what the correct layout looks like, in Firefox: FF correct. And here is what the bugged layout looks like in chrome: Chrome bugged

CSS: 

//Actual page css
.point-one {
  background-color: $off-white;
  padding: 20px 20px;

  .point-text {
    padding: 0 20px;
  }
}

// flexbox grid css
.grid {
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
}

.grid-col {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
}

.fill {
  flex-shrink: 0;
}

.col-1-10 {
  flex: 10% 0 1;
}

.col-2-10 {
  flex: 20% 0 1;
}

.col-3-10 {
  flex: 30% 0 1;
}

.col-4-10 {
  flex: 40% 0 1;
}

.col-5-10 {
  flex: 50% 0 1;
}

.col-6-10 {
  flex: 60% 0 1;
}

.col-7-10 {
  flex: 70% 0 1;
}

.col-8-10 {
  flex: 80% 0 1;
}

.col-9-10 {
  flex: 90% 0 1;
}

.align-center{
  align-items: center; 
}

.even-spacing{
  justify-content: space-around;
}

HTML:

    <div className = "fill">
      <div className = "point-one grid align-center ">
        <div className = "col-2-10">
        </div>
        <div className = "col-6-10 point-text">
          <h4> Aggregate all your cloud storage accounts in one place. All your
          dropbox, onedrive, box, and google drive documents are here! </h4>
        </div>
        <div className = "col-2-10">
        </div>
        <div className = "col-1-10">
        </div>
        <div className = "col-8-10 grid even-spacing point-icons">

          <img className="col-1-10 logo" id="db_logo" src={require("../images/dropbox-logos_dropbox-glyph-blue.png")} />
          <img className="col-2-10 logo" src={require("../images/box_cyan.png")} />
          <img className="col-1-10 logo" src={require("../images/product512.png")} />
          <img className="col-3-10 logo" src={require("../images/OneDrive_rgb_Blue2728.png")} />

        </div>
        <div className = "col-1-10">
        </div>
      </div>
    </div>

I've tried fiddling with padding and vendor prefixes, but no of it seems to do the trick. I don't think it should be a massive change, but I'm not so sure.

Upvotes: 3

Views: 694

Answers (1)

Paulie_D
Paulie_D

Reputation: 115108

Images as flex-children react strangely in some cases.

It's usually best to wrap them in their own divs.

At a minimum, override align-items:stretch [which is also the default].

Upvotes: 2

Related Questions