1

I've been stuck for over a week now and couldn't find any proper solution or explanation on this topic.

I have this flexbox-based horizontal scroll carousel here: https://codevelop.at/flexbox/single.php

It works as expected in Chrome with the correct space (margins) in between. If you call the same URL in Firefox, it gives me these wide margins. It is due to height: 100% on the <section> tags within the main tag. If I remove that, it works, but then the images are not resized correctly.

Any ideas? Thanks in advance

Chrome (as intended): chrome

Firefox (where I am stuck): firefox

Florian
  • 39
  • 5
  • I'm seeing the same thing on both browsers side-by-side. What's your design intent here? You have several section tags but on the whole, I only see one image and it's not displaying. Try adding some placeholder images from https://placeholder.com/ If Margins are giving you trouble, you could use padding or the gap attribute: https://developer.mozilla.org/en-US/docs/Web/CSS/gap – AStombaugh Jun 24 '22 at 13:33
  • Thanks for correcting my question and your response. I now use images from placeholder.com and uploaded two screenshots to the question. I hope you get my design intent better now. – Florian Jun 24 '22 at 19:15
  • It would appear that this is an issue with the way Firefox calculates items inside of a flexbox: https://stackoverflow.com/a/54973569/8565010 See the answer below or use something like max-width instead – AStombaugh Jun 24 '22 at 21:51
  • 1
    Thank you. In combination with your response and Jakob's I got it to work! – Florian Jun 26 '22 at 12:04

1 Answers1

2

Your problem is this part of CSS:

.single-project .second-section img, .single-project .third-section img, .single-project .fourth-section img, .single-project .fifth-section img {
    height: 100%;
    width: auto;
}

It seems like Firefox, in combination with Flexbox, cannot calculate the width correctly like Chrome does, in this case. It takes up the space of the original image width, and is not able to repaint correctly. This is what you are seeing as way too much whitespace.

You could try something like this:

width: 400px;
height: 100%;
object-fit: cover;

While this is not a perfect solution, it is a quick one. You could possibly calculate the perfect image sizes with Javascript to get a more ideal solution.

That was a tricky one. ;-)

JBS
  • 993
  • 5
  • 11