Do browsers interpret flex containers differently from one another?

I'm in the process of creating a website. Within the content area, there are flex-boxes containing images. The number of images can vary (up to 5), and I need to calculate the width of each image to ensure they all fit.

Oddly enough, this works perfectly fine in FireFox, but not in Chrome or Yandex.

It seems like the images are not auto-fitting within the flex-box because the declared height is set to 400px, causing the width: 100% property to correspond to that 400px height.

Below are the HTML and CSS sections:

HTML

<div class="article-images">
    <img src="../images/newsImages/img_6_4.jpg" class="article-images-item" />
    <img src="../images/newsImages/img_6_5.jpg" class="article-images-item" />
    <img src="../images/newsImages/img_6_6.jpg" class="article-images-item" />
    <img src="../images/newsImages/img_6_9.jpg" class="article-images-item" />
</div>

CSS

.article-images {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly; 
    gap: 20px; 
    width: 100%
}
.article-images-item {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 2px;
    cursor: pointer
}

Expected output (as seen in FireFox):

https://i.sstatic.net/FczuN.png

Current output (as observed in Chrome or other browsers)

https://i.sstatic.net/6YFD5.png

htmlcssweb

Answer №1

To address the issue, consider the example provided below (although object-fit is not utilized in this instance). If desired, you can choose to set it up without the image DIV's: view post

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  background-color: rgb(0,150,255);
  align-items: stretch;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 200px; /*--control image size--*/
  margin: 5px;
  border: 2px solid #fff;
  border-radius: 7px;
}

img {
  width: 100%; 
  height:auto; 
  border-radius: 5px; 
  cursor: pointer; 
  display: block; 
  margin-left: auto; 
  margin-right: auto;
}
#outer {padding:2px;}
<div id="outer">
<div class="flex-container">
    <div style="flex-grow: 1 3 1"><img src="https://via.placeholder.com/100x100.gif?text=1"></div>
    <div style="flex-grow: 1 3 1"><img src="https://via.placeholder.com/100x100.gif?text=2"></div>
    <div style="flex-grow: 1 3 1"><img src="https://via.placeholder.com/100x100.gif?text=3"></div>
    <div style="flex-grow: 1 3 1"><img src="https://via.placeholder.com/100x100.gif?text=4"></div>
</div> 
</div>

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

Selecting parent class using JQuery

This is some HTML I have: <label class="rlabel">First Name</label> <input class="rinput" type="text" placeholder="Fisrt Name" required /> <label class="rlabel">Last Name</label> <input class="rinput" type="tex ...

jquerycss

Increase the size of the text box as more text is entered (similar to how it works

I am looking to replicate the comment feature from Facebook exactly. For instance, if I input a sentence that goes beyond the width of the textbox or hit enter for a new line, the textbox should drop down by one line to fit the new content. Visual Represe ...

javascriptjqueryhtmlcss

Design an ARIA menu role with HTML and CSS code

Currently, my code is set up, but I'm unsure about integrating the tab/arrows to navigate to the sub-menu. You can view the code on jsfiddle: https://jsfiddle.net/Fep5Q/60/ This snippet shows a portion of the HTML code I've implemented: <di ...

htmlcsswai-aria

Organize the HTML table upon importing

In my code, I am populating a table with data retrieved from a JSON object. Here is the JavaScript snippet: if (jsonObj[0].array !== 'undefined' && jsonObj[0].array.length > 0) { for (var i = 0; i < jsonObj[0].array.length; i++ ...

jqueryhtmltablesorter

Execute Javascript after modification of the DOM

I have developed two custom directives known as app-content and app-content-item. These directives are intended to be utilized in upcoming projects to provide a basic structure with simple styling. They will be incorporated into a module and should be nest ...

javascripthtmlangularjs

Adjust Side Navigation Bar based on window size alteration

I am currently working on implementing a side navigation bar for a website. At the moment, I am utilizing a <nav> element and populating it with <li> items to establish my sidebar. My code snippet is as follows (note: in-line styling is tempor ...

javascriptjqueryhtmlcssnav

Changing the number format in Python after applying styling

I am working with a dataframe that looks like this: Name Amount A 3,580,093,709.00 B 5,656,745,317.00 After applying some CSS styling, the Amount values turn into scientific notation, such as 3.58009e+09 and 5.39538e+07. Name Amount A 3. ...

pythoncssdataframepandas-styles

Guide to linking two input fields using a single datepicker

To achieve the goal of filling two input fields simultaneously, take a look at the following code snippet: <mat-form-field> <input matInput [matDatepicker]="startDate" formControlName="SaleDate" /> ...

htmlangulardatepicker

Unable to align a block element using CSS

My friend recently shared a code snippet for a menu that I wanted to use on my website. However, the CSS aligns the menu items to the left and I want them to be centered with a width of 100%. I've tried various solutions like removing float:left, chan ...

jqueryhtmlcssdrop-down-menu

"Learn the simple trick to quickly deactivate an anchor tag in just one easy

I have a navigation bar with items listed in an unordered list: <ul id="mainN" class="nanGroup" ng-show="lCntr.only == 'mainNav'"> <li > <a class="btn btn-small btn-revert" ng-click="lCntr.profile()"></a> &l ...

javascriptjqueryhtml

Managing a variable within HTML tags: Best practices and guidelines

I'm currently working on a Flask application that features a dashboard with different buttons, each triggering a specific Python function. I want the application to return to the dashboard after executing these functions and display a string for the u ...

pythonhtmlvariablesflask

Struggling with CSS, seeking improvements to align with my previous coding style

After spending a considerable amount of time working on my game, I made the decision to change my navigation bars to buttons. However, I'm facing issues while trying to finalize the style that I had previously. Here is the old code fiddle: https://js ...

htmlcss

Troubleshooting the issue with generateStaticParams() in NextJs/TypeScript

My NextJs app has a products page that should render dynamic routes statically using generateStaticParams(). However, this functionality does not work as expected. When I run "npm run build," it only generates 3 static pages instead of the expected number. ...

javascripthtmlreactjstypescriptnext.js

Scrollable container with jQuery draggable functionality

I am currently working on implementing a draggable list that I want to contain within a scrollable div. $( ".draggable" ).draggable(); Here is the fiddle I have created for this: http://jsfiddle.net/YvJhE/660/ However, the issue I am facing is that the ...

javascriptjqueryhtmlcssdraggable

I'm having trouble customizing the appearance of a checkbox. I want it to change color when clicked, but I can't seem to get it to stay in

In order to achieve the desired effect where the white part should appear on the tick, initially the entire thing should be black and then turn white upon clicking. I am currently working on this in Storybook and would appreciate help with positioning. htt ...

htmlcssreactjs

Updating a URL in an HTML form with JavaScript

Currently, I am faced with the task of manipulating a variable's value in a JS file within a function that is responsible for dynamically updating values in an HTML table without necessitating a full website reload. The function code snippet appears b ...

javascriptphphtmldom

Angular getElementById is a useful method for accessing and manipulating elements

I am using asp.net and angular 7 to retrieve data saved by a form with a specific ID. The data is successfully stored in local storage but is not being displayed on the front-end for the user. No error messages are being shown. Can anyone assist me with th ...

htmlasp.netangulartypescriptangular7

Adding ordered lists using innerHTML in Angular are a fabulous way to organize and

Currently, my Angular CLI version is 13.3.6 with Node v16.12.0 and I'm encountering an issue when trying to utilize the innerHTML property. Within my Typescript file, I have a variable containing an ordered list like the following: let myText = "< ...

htmlangular

Guide on incorporating a URL link into an <a class=> tag

Working on a Wordpress website, I encountered an issue in the widget section where I can't get any URL code to work! Here is the current code snippet; [one_third] <a class="home-buttons" href="http://example.com/mortgage-calculator"><i clas ...

javascriptcsswordpressclasswidget

Showing a div with seamless elegance

XHTML <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>example</title> </head> <style > body{ background: black; } ...

javascripthtmlcss