CODEWITHSUNDEEP
htmlcssgoogle-chrome
RoyS
RoyS

Reputation: 1499

Chrome is breaking flexbox while Firefox doesn't

I've got a problem with Chrome breaking flexbox CSS in the front page of a website, while FF doesn't. Here is the HTML

    <div class="intro_container">
    <div id="top_text1" class = "intro_items intro_item_1">
    ....
    </div>
    <div id="top_text2" class = "intro_items intro_item_1">
    ....
    </div>
    </div>

and the CSS

    div.intro_container  {
      width: 100%;
      background:;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
    }
    div.intro_items  {
      background: white;
      border:  .1em solid #000093;
      margin: 0.5em;
      padding: 3%;
      flex:  1 0 40%;
    }

Any help would be most welcome

Upvotes: 4

Views: 508

Answers (2)

mike
mike

Reputation: 1

I'm getting a similar issue... I have a page that is OK in IE, Firefox, Opera and Safari... but DIV width is "broken" now in Chrome... just in the last week or so.

Checking in Firebug ( etc) I have to set a certain DIV one pixel larger than normal, else the picture inside gets "squeezed out".

Can't get to my server til tomorrow to actually edit Anything but 'inspect element' shows that is a workaround. Not sure WHY the problem has reared its ugly head, exactly - the page has been working great for more than a year now :-(

Upvotes: 0

rajesh
rajesh

Reputation: 1485

From my point of view, the problem is not with the browsers or flex property issues.

The problem is with the following CSS style,

             div#top_text1 {margin-top: -3%;}

line no:325 in layout.css file

So just remove this CSS style add check out it will work....

Upvotes: 1

Related Questions