URL: https://jsfiddle.net/3uk8so7d/
Browser / Version: Firefox 60.0
Operating System: Windows 10
Tested Another Browser: Yes
Problem type: Design is broken
Description: Incorrect alignment of the block
Steps to Reproduce:
Site URL contains the example of the bug.
We have a block with flex display and with a column orientation. It has another block, also with a flex display. But with a row orientation and a fixed height (for example 60 pixels). In this block there is an image (the original image size for reproducing the error in this example should be more than 111 pixels) with a relative height (100%) and a block with text that is aligned with the align-self property.
In all browsers except Firefox, the text block is correctly centered. The error occurs only if the first block has a flex display and only the column orientation. If you change the orientation to a line or remove the flex display, then everything is aligned correctly.
The problem is reproduced on Windows (tested on version 60.0), Linux Ubuntu (tested on version 56.0) and Android (tested on version 60.0.2).
From webcompat.com with ❤️
URL: https://jsfiddle.net/3uk8so7d/
Browser / Version: Firefox 60.0
Operating System: Windows 10
Tested Another Browser: Yes
Problem type: Design is broken
Description: Incorrect alignment of the block
Steps to Reproduce:
Site URL contains the example of the bug.
We have a block with flex display and with a column orientation. It has another block, also with a flex display. But with a row orientation and a fixed height (for example 60 pixels). In this block there is an image (the original image size for reproducing the error in this example should be more than 111 pixels) with a relative height (100%) and a block with text that is aligned with the align-self property.
In all browsers except Firefox, the text block is correctly centered. The error occurs only if the first block has a flex display and only the column orientation. If you change the orientation to a line or remove the flex display, then everything is aligned correctly.
The problem is reproduced on Windows (tested on version 60.0), Linux Ubuntu (tested on version 56.0) and Android (tested on version 60.0.2).
From webcompat.com with ❤️