Chrome is breaking flexbox while Firefox doesn't

Question

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

Answer 1

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....

Answer 2

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 :-(