Exploring the concept of height definition within flexbox and incorporating responsive images on Chrome and Safari browsers

A unique issue arises when comparing the behavior of a simple code snippet in Chrome and Safari browsers.

Check out the HTML code below:

<div class="row">
    <div class="col-md-6 d-flex">
        <img class="main-img" src="http://placehold.it/2000x1000.png">
    </div>
    <div class="col-md-6 d-flex">
        <p>Lorem<br><br><br><br><br>Ipsum</br></p>
    </div>
</div>

Now, let's take a look at the accompanying CSS:

.d-flex{
  background-color: #999999;
}

div > img {
  margin-top: auto;
  margin-bottom: auto;
  width: 100%;
}

div > p {
  margin-top: auto;
  margin-bottom: auto;
  background-color: red;
}

An interesting discrepancy is observed between Safari and Chrome regarding the space around the image. While Safari displays no additional space above or below the image, Chrome exhibits a significant gap.

It appears that Chrome calculates the image height to reserve space before adjusting the image width, whereas Safari prioritizes setting the width first before determining the height of the containing div.

So, how can we make Chrome behave more like Safari in this scenario?

cssgoogle-chromesafariflexbox

Answer №1

To address the inconsistency between browsers, using img as flex items may result in varied rendering.

In such situations, it is recommended to wrap the img with a wrapper element.

Check out the updated codepen here

Here's the Stack snippet:

.d-flex{
  background-color: #999999;
}

div > img {
  margin-top: auto;
  margin-bottom: auto;
  width: 100%;
}

div > p {
  margin-top: auto;
  margin-bottom: auto;
  background-color: red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-md-6 d-flex">
    <div>
      <img class="main-img" src="http://placehold.it/2000x1000.png">
    </div>
  </div>
  <div class="col-md-6 d-flex">
    <p>Lorem<br><br><br><br><br>Ipsum<br></p>
  </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

Exploring Website Layouts Across Various Screen Resolutions

I am facing an issue with my website layout. While it looks great on a 20" screen, on an 11" screen the elements are not displaying correctly. The #logo is overlapping the #menu, and the #bubble is appearing below the #frame. I had set percentage size para ...

htmlcssresolution

Maintaining a sticky footer that remains visible throughout the content as the screen is resized

For more information, please visit my website at I attempted to implement a "sticky footer" technique following the steps outlined in this tutorial (http://ryanfait.com/sticky-footer/) Unfortunately, the sticky footer does not function properly when resi ...

htmlcss

Applying CSS text-shadow to an input field can cause the shadow to be truncated

I've encountered an issue when applying text-shadow to an input field, where the shadow appears to clip around the text. Here is the CSS code I used: @import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900& ...

cssinput-fieldtext-shadow

Having difficulty retrieving an angular file from a location outside of the asset folder

I'm encountering issues with a small project that is meant to read a log and present it in table format. Here is the outline of the project structure: project structure Within the LOG directory, I should be able to access motore.log from my DataServi ...

htmlcssangulartypescript

How can you align square cells within a container using CSS grids while maintaining a consistent grid gap?

Our objective is to perfectly align square cells with the edges of their container while maintaining a consistent gap between cells in each row and column. Although this Codepen solution is close, there are two key issues: (1) vertical spacing doesn' ...

htmlcsscss-grid

Tips for modifying the class of a span inline element using a javascript function

Looking for assistance in creating a password text box with an eye icon that toggles visibility. When the user clicks on the eye icon, it should change to a crossed-out eye icon and switch the input type to text. <div class="input-group show-hide-passw ...

javascriptcssbootstrap-4

Incorporate my personal design flair when utilizing third-party React.js component libraries

Incorporating Material UI as a component library in my React project has been beneficial. However, I am facing a challenge where the inline styling provided by Material UI clashes with my existing custom styles that I have developed over time. Is there a ...

cssreactjsmaterial-ui

Unable to properly vertically center multiple divs within a parent div and align their elements vertically within them

I'm diving into the world of HTML/CSS and grappling with various concepts. My goal is to vertically align 2 divs within a larger div, as well as center the contents within those divs. HTML: <html> <head> <link rel="stylesheet" typ ...

htmlcssdivider

Having Difficulty Modifying the CSS Styles of a Specific Class

I've been struggling with a CSS styling issue for some time now. The problem lies in targeting the class for the thumbnail preview of vue2-dropzone (which shares similar properties with dropzone.js based on documentation). Each time I upload an image, ...

cssvue.jsdropzone.jsvue2-dropzone

Round progress indicator with directional pointer

I've been working on creating a round progress bar that features an arrow at the front. This is my current progress: HTML Code: <!-- Container --> <ul class="progress"> <!-- Item --> <li data-name="Item 1& ...

htmlcsssvg

Tips for configuring the default appearance of a MaterialUI TextField to mimic the appearance when it is in focus

Hello, I am currently delving into Material UI (ver.5.10.10) for the first time. My goal is to customize the styling of the TextField component in Material UI. Specifically, I want the TextField to always display its focused style, regardless of whether it ...

cssreactjsmaterial-uitextfieldemotion

Photo Label fails to adjust size correctly when loading two sources (png and webp)

Currently, I have been working on a website that showcases a 3D book: https://i.sstatic.net/oC1nL.png The challenge I am facing is to ensure support for both png and webp images across all browsers. Initially, when I load just one image, everything works ...

htmlcssimage

Link the Sass variable to Vue props

When working on creating reusable components in Vue.js, I often utilize Sass variables for maintaining consistency in colors, sizes, and other styles. However, I recently encountered an issue with passing Sass variables using props in Vue.js. If I directly ...

javascriptcssvue.jssass

Table featuring identical submit buttons in each row: initial submit button is nonfunctional (potential issue with multiple identical IDs)

My table displays product files, with the option to add notes. If a note is added, it shows in a row. If not, a text area field with a submit button appears instead. Everything seems to be working well, except for the first row without a note. After addin ...

htmlcssforms

Creating a circular image in a responsive navigation bar

Currently, I have a chat navigation bar with divs representing different users, each displaying a photo of the user. My goal is to have these photos displayed as perfect circles. To achieve this, I am using padding-bottom and width properties. However, I a ...

javascripthtmlcss

How can you adjust the input size in Chrome with italic font styling?

Currently, I am troubleshooting an issue with the styling of my input fields. Specifically, I want to change the font style to italic when the input is modified. This functionality is performing correctly in Firefox. However, in Chrome, when I add font-sty ...

htmlcssgoogle-chrome

I'm working on using CSS to design a layout similar to the one shown in the image below, experimenting with flexbox to achieve the

https://i.sstatic.net/4kNAd.png I am currently facing an issue with the layout of my navigation bar, as it is displaying in a column instead of a row like the format shown in the image. I have tried using flexbox and setting the display to inline-block in ...

htmlcssflexbox

Implementing a dual hover effect on a Div element

I am working with HTML code that includes an image and text <div class="subcontainer1"> <img src="a.png" alt="" class="imgcolumn"> <h3 class="header3">Hello</h3> </div> This setup places the content above the image. ...

javascriptjqueryhtmlcss

I am interested in creating some CSS styles to modify the color of a toggle switch's plus sign icon

Can anyone help me customize my Wordpress theme? I'm trying to change the color of my toggle plus signs to white using CSS, but I can't figure it out. Your assistance would be greatly appreciated. Here is the URL: This is the CSS code I attempt ...

css

CSS swapping versus CSS altering

Looking to make changes to the CSS of a page, there are two methods that come to mind: Option 1: Utilize the Jquery .css function to modify every tag in the HTML. For instance: $("body").css("background : red") Alternatively, you can disable the current ...

javascriptjquerycss