Discrepancies in Flexbox Handling of Images between Chrome and Firefox

My goal is to showcase images on a flexbox grid, and while it works perfectly in Chrome, I'm encountering issues in Firefox (uncertain where the problem lies).

Check out the CodePen link for reference : https://codepen.io/anon/pen/QJNajw?editors=1100

Chrome:

https://i.sstatic.net/2Qmhc.png

Firefox:

https://i.sstatic.net/9JfCD.png

The concept behind the CSS is to initially have the grid cells occupy all available space, before allowing the images to fill these cells without distortion.

However, in Firefox, it seems like the images are simply taking up the entire available width, causing an overflow issue. (It's worth noting that in the second grid, the layout leans more towards being wider than taller, preventing vertical overlap when the images consume the available width.)

Is there a way to resolve this discrepancy and make it align with the intended design in Firefox?

.grids {
  display: flex;
}
.grid {
  display: flex;
  flex-direction: column;
  background: #ddd;
  box-sizing: border-box;
  border-radius: 10px;
  margin: 5px;
  padding: 2px;
  width: 120px;
  height: 120px;
}
.row {
  display: flex;
  justify-content: center;
  flex-grow: 1;
  flex-basis: 0;
}
.cell {
  display: flex;
  flex-grow: 1;
  flex-basis: 0;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  padding: 2px;
}
.cell img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
<div class="grids">
  <div class="grid">
    <div class="row" style="padding: 0px 16.6667%;">
      <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div>
      <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div>
    </div>
    <div class="row" style="padding: 0px 0%;">
      <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div>
      <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div>
      <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div>
    </div>
    <div class="row" style="padding: 0px 16.6667%;">
      <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div>
      <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div>
    </div>
    <div class="row" style="padding: 0px 0%;">
      <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div>
      <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div>
      <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div>
    </div>
  </div>
  <div class="grid">
    <div class="row" style="padding: 0px 37.5%;">
      <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div>
    </div>
    <div class="row" style="padding: 0px 25%;">
      <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div>
      <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div>
    </div>
    <div class="row" style="padding: 0px 12.5%;">
      <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div>
      <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div>
      <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div>
    </div>
    <div class="row" style="padding: 0px 0%;">
      <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div>
      <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div>
      <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div>
      <div class="cell"><img src="https://img.icons8.com/wired/80/000000/circled-user.png"></div>
    </div>
  </div>
</div>

htmlcssflexbox

Answer №1

Such an intriguing situation! The behavior of flexbox can be quite puzzling at times.

However, through a series of trials, I discovered that the issue can be resolved by positioning the img element relative to its containing cell:

.cell {
     position: relative;
}
.cell img {
    position: absolute;
}

Implementing this solution yielded positive results in both Firefox and Chrome browsers.

Answer №2

While I may not have a thorough understanding of the nuances between browsers, one simple solution could be to set a maximum width for the images to prevent them from enlarging beyond your desired size. In the case of triangle grid images with a default size of 25px, you can use the following CSS code to maintain that proportion:

.cell img {
  display: block;
  width: 100%;
  max-width: 25px;
  max-height: 100%;
  object-fit: contain;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What causes the disappearance of the figure under slider control?

One of the functionalities I am working on involves using three.js to dynamically adjust the rotation speed of a cube by utilizing a slider control. After setting up the scene, camera, and cube, the JavaScript code that controls the rotation speed looks li ...

htmlthree.js

Steps for aligning an image to the right using Bootstrap Vue

I'm currently learning Bootstrap Vue and I'm trying to align an image on the right using a b-card header. The challenge I'm facing is that when I add the image, it disrupts the perfect size of the template header, causing the image to show a ...

cssvue.jsbootstrap-4bootstrap-vue

The positioning of the Zorro table column remains flexible despite the presence of nzLeft

I am currently developing a project using Angular. Within one of my components, I have a table that displays some data. This table is generated by the ng-zorro table module. However, I've encountered an issue where setting a table column or header wi ...

htmlcssangularng-zorro-antd

What is the best way to keep a div element fixed at the top of a webpage?

I am facing an issue with a div that contains three SVG files layered on top of each other and meant to be centered on the page. Ideally, when the user scrolls down, I want these SVG files to stick to the top and remain there. In my CSS attempts, I have u ...

htmlcss

Hover over this area to reveal the hidden text as it slides into view

My goal is to hover over truncated text and reveal the full length of the dynamic text. However, I am struggling with removing extra space at the end of shorter text when hovered and displaying all the text for longer ones. I have a solution that almost w ...

htmlcsshover

Center the navigation links within the navigation block

I am using the startbootstrap-small-business template and customizing it to fit my requirements. I have inserted a new logo which caused me to adjust the height of the navbar to approximately 120px. Now, my goal is to vertically align the links on the righ ...

htmlcsstwitter-bootstrap

What is the best way to trigger the onclick event before onblur event?

I have two elements - an anchor with an onclick function and an input with an onfocus event. The anchor is toggled by the input button; meaning, when the button is in focus, the anchor is displayed, and when it loses focus, the anchor is hidden. I'm l ...

javascripthtmlajax

Encountering an Error when Using Sass 3 to Customize Bootstrap 5 Color Values

Having some trouble changing the default theme colors in Bootstrap using SASS. Whenever I try to change a color and compile, I keep getting an error saying 'invalid CSS value'. I've gone through the documentation and watched a few tutorials ...

csssassbootstrap-5

"Creating a visually appealing form with the input element

When using ASP.Net, there is a tag known as CheckboxList that generates the following output: <table class="checkbox"> <tbody> <tr> <td> <input id="/*longdynamicstring1*/" type="checkbox" name="/*longdynamicstring2*/ ...

asp.netcss

Ways to ensure the background color stretches the entire length of the page

I've been attempting to create a background image or color that extends across the entire main content area, but haven't had any success so far. For reference, please visit My attempts have involved adding a class called fill to the container-f ...

htmlcsstwitter-bootstrap

Troubleshooting alignment problems with CSS DIVs within VUE Components

I have a Vue application with 2 components, each housed in their own div. My CSS skills are not strong, so I found a CSS template that works well and is responsive. However, I've noticed that the top and bottom divs do not align properly and their wid ...

cssvue.jsvue-component

What is the best way to evenly divide divs vertically on a Bootstrap website?

I am currently working on a responsive page design and have come across this useful resource: http://www.bootply.com/2sfiCehqac My main objective is to ensure that when the screen size is medium or large: 1) div_left and div_right (orange and blue) adjus ...

csstwitter-bootstrapresponsive-design

A guide on using Selenium to interact with a doughnut pie chart element

I am having difficulty performing a click event on the colored ring part of this doughnut pie chart. Currently, I can locate the element for each section of the chart, but the click event is being triggered in the center of the chart (empty inner circle) w ...

javascripthtmlseleniumselenium-webdriverxpath

Position a Paper component in the center of a div

I'm having trouble centering my <Paper> element inside a div. Can anyone help me with this? I have placed both the <Paper> and <RaisedButton> elements inside the div and applied the following CSS: .timerArea { text-align: center; ...

cssreactjsmaterial-ui

Having trouble with margin auto 0 not functioning properly in Safari on iPad?

I'm facing a challenge with centering a div in Safari on iPad. It works fine in Chrome, but in Safari there are margins on the left and right which require scrolling to view the whole content. Any suggestions on how to make this work seamlessly in bot ...

htmlipadresponsive-design

What causes a span with absolute positioning to not be correctly positioned within a span with relative positioning in Firefox, unless it is displayed as inline-block or similar?

Can you explain why the code below doesn't display correctly in Firefox unless the parent span is set to display as inline-block? When inspecting the layout of the absolutely positioned span, it shows the number 184 instead of 197 on the right side. A ...

htmlcssfirefoxabsolute

I am looking to position the search bar all the way to the right side

I've been struggling to properly align the search bar within my navigation bar. Despite my best efforts, I can't seem to get it right. Below is just a snippet of my navbar code, showcasing the search bar within a div container. .search { ...

htmlcssalignment

Retrieve the present time of an ongoing CSS3 animation

I've been trying to retrieve the current time of a running animation, but I haven't had any luck so far. I can easily grab the start time using: myelement.addEventListener('webkitAnimationStart', function (evt){ console.log(evt.elaps ...

javascriptcssanimationdom-events

Remove numerous entries from the WordPress database by selecting multiple checkboxes

A new customer table named "tblvessel" has been created in the Wordpress database. The code provided below selects records from the database and displays them as a table with checkboxes next to each record, assigning the record's 'ID' to the ...

javascriptphpjqueryhtmlwordpress

Encountered issue while converting half of the string array to JSON using JavaScript

I encountered an issue with the code below while trying to convert an array into JSON. Here is my code: <html> <head> </head> <body style="text-align:center;" id="body"> <p id="GFG_UP1" style="font-size: 16px;"> </p ...

javascripthtmlarraysreact-fullstack