Display flex alignment incorrect in Chrome, Safari and Edge, but correct in Firefox

Question

I have a div using the display flex method that contains other divs also using display flex to get the proper alignment that I want. I usually develop my web pages using Firefox and then later test them with other browsers to see if they work/display correctly there too.

I want to have a super-container that arranges its items in a normal flow. These items contains two images. These images are placed next to each other, and only their widths are fixed. The heights may differ per item. Below these two images I place a bit of text. All items are aligned such, that the first line of the texts are aligned with each other. The images should be placed in the horizontal middle of the item.

The following image shows how I want it to be displayed: Firefox correct display. In Chrome and Edge (and Safari on iOS), the image looks like this: Incorrect display.

I have the following HTML and CSS:

.CompleteContainer
{
  align-items: baseline;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 300px;
}

.ItemContainer
{
  align-items: center;
  background-color: aqua;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  margin: 0 0 5px 10px;
  width: 130px;
}

.ItemTopContainer
{
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.ItemTopLeftContainer
{
  align-items: flex-end;
  background-color: #ff8888;
  display: flex;
  justify-content: flex-end;
  width: calc(50% - 2px);
}

.ItemTopLeft
{
  background-color: #ff0000;
  height: 50px;
  width: 50px;
}

.ItemTopRightContainer
{
  align-items: flex-end;
  background-color: #88ff88;
  display: flex;
  justify-content: flex-start;
  width: calc(50% - 2px);
}

.ItemTopRight
{
  background-color: #00aa00;
  height: 25px;
  width: 50px;
}

.ItemBottomContainer
{
  text-align: center;
}

<div class="CompleteContainer">
  <div class="ItemContainer">
    <div class="ItemTopContainer">
      <div class="ItemTopLeftContainer">
        <div class="ItemTopLeft">
          &nbsp;
        </div>
      </div>
      <div class="ItemTopRightContainer">
        <div class="ItemTopRight">
          &nbsp;
        </div>
      </div>
    </div>
    <div class="ItemBottomContainer">
      Foo bar
    </div>
  </div>
  <div class="ItemContainer">
    <div class="ItemTopContainer">
      <div class="ItemTopLeftContainer">
        <div class="ItemTopLeft">
          &nbsp;
        </div>
      </div>
      <div class="ItemTopRightContainer">
        <div class="ItemTopRight">
          &nbsp;
        </div>
      </div>
    </div>
    <div class="ItemBottomContainer">
      Foo bar, lorum ipsum
    </div>
  </div>
  <div class="ItemContainer">
    <div class="ItemTopContainer">
      <div class="ItemTopLeftContainer">
        <div class="ItemTopLeft">
          &nbsp;
        </div>
      </div>
      <div class="ItemTopRightContainer">
        <div class="ItemTopRight">
          &nbsp;
        </div>
      </div>
    </div>
    <div class="ItemBottomContainer">
      Lorum ipsum
    </div>
  </div>
</div>

What am I doing wrong or what am I missing to get the display in Chrome and Edge the same as in Firefox? To be clear: in Firefox the above code snippet gives the results I want, in Chrome and Edge (and Safari on iOS) they are wrong.

UPDATE: I am not yet allowed to comment on the answers directly, but I will do it this way. Both the answers did point me in the correct direction, though they did not produce the correct results I wanted. I have updated the code in this question to reflect the changes in CSS to create the layout I want.

I have updated the original post, such that it creates the layout the way I want it. — Marcel V.
– Marcel V., Commented May 22, 2018 at 10:35
Your code above is rendering the same layout for me in Firefox, Chrome and Edge. jsfiddle.net/wku9wswp — Michael Benjamin
– Michael Benjamin, Commented May 22, 2018 at 18:04
@Michael_B: The original code that didn't render the same in Firefox, Chrome and Edge is replaced with the code that DOES render the same and produces the output that I want. The original code that did not render the same can be found here: jsfiddle.net/k2gr4y69/1/ — Marcel V.
– Marcel V., Commented May 24, 2018 at 11:00

Gerard · Accepted Answer · 2018-05-22 07:35:51Z

I have adjusted your code below and included documentation in the source. Taken out the floats. Please note floats do not work inside a flexbox.

.CompleteContainer
{
  align-items: baseline;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 300px;
}

.ItemContainer
{
  align-items: center;
  background-color: aqua;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  margin: 0 0 5px 10px;
  width: 130px;
}

.ItemTopContainer
{
  width: 100%;
  display: flex; /* Added */
}

.ItemTopLeftContainer
{
  align-items: flex-end; 
  display: flex;
  height: 100%;
  /* justify-content: right; "right" does not exist. */
  width: calc(50% - 2px);
}

.ItemTopLeft
{
  background-color: red;
  height: 50px;
  width: 50px;
}

.ItemTopRightContainer
{
  align-self: flex-end; /* Replacing align-items */
  /* Not necessary
  display: flex;
  height: 100%;
  justify-content: left;
  */
  width: calc(50% - 2px);
}

.ItemTopRight
{
  background-color: green;
  height: 25px;
  width: 50px;
}

.ItemBottomContainer
{
  text-align: center;
}

<div class="CompleteContainer">
  <div class="ItemContainer">
    <div class="ItemTopContainer">
      <div class="ItemTopLeftContainer">
        <div class="ItemTopLeft">
          &nbsp;
        </div>
      </div>
      <div class="ItemTopRightContainer">
        <div class="ItemTopRight">
          &nbsp;
        </div>
      </div>
    </div>
    <div class="ItemBottomContainer">
      Foo bar
    </div>
  </div>
  <div class="ItemContainer">
    <div class="ItemTopContainer">
      <div class="ItemTopLeftContainer">
        <div class="ItemTopLeft">
          &nbsp;
        </div>
      </div>
      <div class="ItemTopRightContainer">
        <div class="ItemTopRight">
          &nbsp;
        </div>
      </div>
    </div>
    <div class="ItemBottomContainer">
      Foo bar, lorum ipsum
    </div>
  </div>
  <div class="ItemContainer">
    <div class="ItemTopContainer">
      <div class="ItemTopLeftContainer">
        <div class="ItemTopLeft">
          &nbsp;
        </div>
      </div>
      <div class="ItemTopRightContainer">
        <div class="ItemTopRight">
          &nbsp;
        </div>
      </div>
    </div>
    <div class="ItemBottomContainer">
      Lorum ipsum
    </div>
  </div>
</div>

rmarif · Accepted Answer · 2018-05-22 07:20:37Z

.CompleteContainer
{
  align-items: baseline;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 300px;
}

.ItemContainer
{
  align-items: center;
  background-color: aqua;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  margin: 0 0 5px 10px;
  width: 130px;
}

.ItemTopContainer
{
  width: 100%;
  display: flex;
  align-items: center;
}

.ItemTopLeftContainer
{
  align-items: flex-end;
  display: flex;
  float: left;
  height: 100%;
  justify-content: right;
  width: calc(50% - 2px);
}

.ItemTopLeft
{
  background-color: red;
  height: 50px;
  width: 50px;
}

.ItemTopRightContainer
{
  align-items: flex-end;
  display: flex;
  float: right;
  height: 100%;
  justify-content: left;
  width: calc(50% - 2px);
}

.ItemTopRight
{
  background-color: green;
  height: 25px;
  width: 50px;
}

.ItemBottomContainer
{
  text-align: center;
}

<div class="CompleteContainer">
  <div class="ItemContainer">
    <div class="ItemTopContainer">
      <div class="ItemTopLeftContainer">
        <div class="ItemTopLeft">
          &nbsp;
        </div>
      </div>
      <div class="ItemTopRightContainer">
        <div class="ItemTopRight">
          &nbsp;
        </div>
      </div>
    </div>
    <div class="ItemBottomContainer">
      Foo bar
    </div>
  </div>
  <div class="ItemContainer">
    <div class="ItemTopContainer">
      <div class="ItemTopLeftContainer">
        <div class="ItemTopLeft">
          &nbsp;
        </div>
      </div>
      <div class="ItemTopRightContainer">
        <div class="ItemTopRight">
          &nbsp;
        </div>
      </div>
    </div>
    <div class="ItemBottomContainer">
      Foo bar, lorum ipsum
    </div>
  </div>
  <div class="ItemContainer">
    <div class="ItemTopContainer">
      <div class="ItemTopLeftContainer">
        <div class="ItemTopLeft">
          &nbsp;
        </div>
      </div>
      <div class="ItemTopRightContainer">
        <div class="ItemTopRight">
          &nbsp;
        </div>
      </div>
    </div>
    <div class="ItemBottomContainer">
      Lorum ipsum
    </div>
  </div>
</div>

Collectives™ on Stack Overflow

Display flex alignment incorrect in Chrome, Safari and Edge, but correct in Firefox

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related