Weird behaviour of a slightly modified w3schools sample

[Caaat1]

Hi, everyone!

Let me publish a little "discovery" based on a flip card w3cshools TryIt:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_flip_card

As I apply one more wrapper to the flipcad front&back DIVs with no other changes, the result becomes inadequate in FireFox. 

All chromium-based browsers render it okay.

Layout remains solid and its logic still intact. So why???!!!

https://playcode.io/589103/

Many thanks!

Edited May 6, 2020 by Caaat1

[dsonesuk]

new wrapper has no height set, so it will wrap to content, flip elements have 100% height, but! they will  fit height of new wrapper which is to height of content, not to height of flip-card-inner which is total height of flip-card elements.

Remember you can only have one unique id within each page not multiple duplicates. 

[Caaat1]

Thnks a bunch! I got that... But it remains unclear why Chrome still displays it as before. I believe I have the cache disabled in all my browsers.

22 hours ago, Caaat1 said:

Hi, everyone!

Let me publish a little "discovery" based on a flip card w3cshools TryIt:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_flip_card

As I apply one more wrapper to the flipcad front&back DIVs with no other changes, the result becomes inadequate in FireFox. 

All chromium-based browsers render it okay.

Layout remains solid and its logic still intact. So why???!!!

https://playcode.io/589103/

Greetings!

 

Edited May 7, 2020 by Caaat1

[dsonesuk]

Could be simple as one has a default fontsize, default margins for paragraph and header elements greater than the other, so the height of chrome wrapper happens to fill the full height available, and gives same as if it was given 100% height.

Edited May 7, 2020 by dsonesuk

[Caaat1]

I'm discouraged, sir. I tried adding an explicit height to the wrappers, but the result's remaining the same -- lame display in FF and correct in Chrome. With or without fixed height.

https://playcode.io/589103/

If you just try it with FF on your side to reassure I'm not breaking down for a stupid reason.

[dsonesuk]

It does not work properly because you have added the wrapper within .flip-card-inner class element and in doing the styling affects the wrapper and not front and back class elements. So move it outside flip-card-inner container element, and give wrapper height: 100%; and width: 100%;