Image Height Inside Flexbox Not Working in Chrome

Image height inside flexbox not working in Chrome

There are two problems you need to overcome:

Firefox solves them both on its own, but Chrome needs assistance.

Problem #1

The first problem is that flex items, by default, cannot be smaller than their content. An initial setting on flex items is min-height: auto.

Therefore, a flex item with a replaced element, like an image, will default to the inherent size of the image. The item cannot be made smaller, unless you override the initial setting (use min-height: 0).

#flex-container {  height: 300px;  width: 500px;  display: flex;  flex-flow: column nowrap;  justify-content: center;  align-items: center;  border: 5px solid black;}#container1, #container2 {  height: 100px;  width: 300px;  background: orange;  flex: 1 0 auto;}img { min-height: 0; } /* NEW */

<div id="flex-container">
  <div id="container1">300x100 px</div>
  <img src="http://i.imgur.com/RRUe0Mo.png" alt="Sample Image">
  <div id="container2">300x100 px</div>
</div>

Cross-browser image height issue with flexbox inside CSS grid

There's a lot going on in that code.

It's important to note that percentage heights are unreliable across browsers when parent elements don't have defined heights (see links below).

That's said, in this particular case, adding height: 100% to the img element (.class-main-img) appears to solve the problem.

More information:

Working with the CSS height property and percentage values
Chrome / Safari not filling 100% height of flex parent

Flexbox not displaying images correctly in Chrome

This is basically happening because the overflow of content is being scrolled on chrome in X axis. You can use CSS Grid for your images container.

Making your grid container with display: inline-grid and since the images can have different width we will use grid-template-columns: auto auto for the columns.

So all together its like this:

body {    background: #000000        url('https://www.airstarkennels.com/images/main-background.jpg') left        bottom/cover no-repeat fixed;}
#first-page-header {    color: #ff00ee;    text-align: center;}
#parents-page-content-wrapper {    margin: 0 0 2em;}#parents-page-mommy-info-wrapper {    display: flex;    justify-content: center;}.parents-page-image-wrapper {    display: inline-grid;    grid-template-columns: auto auto;    justify-items: space-between;}
.parents-page-images {    max-width: 100%;    max-height: 350px;    opacity: 1;    cursor: pointer;    transition: 0.4s;}
.parents-page-images:hover {    opacity: 0.8;}

<main>    <div id="parents-page-content-wrapper">        <h1 id="first-page-header">Parents</h1>        <div id="parents-page-mommy-info-wrapper">            <div class="parents-page-image-wrapper">                <img id="parents-page-mommys-pedigree" class="parents-page-images"                    src="https://www.airstarkennels.com/images/mommy-pedigree.jpg">                <img id="parents-page-mommy-image" class="parents-page-images"                    src="https://www.airstarkennels.com/images/mommy.jpg">            </div>        </div>    </div></main>

Image inside flex parent is not overflowing in chrome

h1,h2,h3,h4,h5,h6 {  margin: 0;}
.card {  display: flex;  flex-direction: column;  position: relative;  width: 60%;}
.card__imgContainer {  flex: 1 1 auto;  display: flex;  justify-content: center;  overflow: hidden;}
.card__img {  display: block;  flex: 1 1 0;  width: 100%;  height: 100%;  object-fit: cover;}
.card__content {  padding: 10px 30px 15px;  background: #4821f5;  /* Old browsers */  background: -moz-linear-gradient(45deg, #4821f5 0%, #3b8dd4 100%);  /* FF3.6-15 */  background: -webkit-linear-gradient(45deg, #4821f5 0%, #3b8dd4 100%);  /* Chrome10-25,Safari5.1-6 */  background: linear-gradient(45deg, #4821f5 0%, #3b8dd4 100%);  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#4821f5", endColorstr="#3b8dd4", GradientType=1);  /* IE6-9 fallback on horizontal gradient */}
.card__info {  margin-top: 15px;  margin-bottom: 10px;}
.card__info>* {  display: block;  font-size: 13px;  display: flex;  align-items: center;}
.card__info>*+* {  margin-top: 5px;}
.card__icon {  margin-right: 6px;  line-height: inherit;}
.card__heading {  font-size: 36px;  line-height: 1;}
.card__buttons {  display: flex;  flex-wrap: wrap;  margin: -8px;}
.card__buttons>* {  margin: 8px;}
.card__button {  padding-top: 0.65em;  padding-bottom: 0.65em;}
.card__textbox {  margin-top: 20px;}
.card-group {  display: flex;  flex-wrap: wrap;  margin: -1%;}
.card-group>* {  width: 31%;  margin: 1%;}

<div class="card-group">  <div class="card">    <div class="card__imgContainer">      <img class="card__img" src="https://www.pierrot-bg.com/images/news/2.jpg" alt="Меко казано" style="">    </div>    <div class="card__content">      <h2 class="card__heading">Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet..</h2>      <div class="card__info">        <span class="card__time"><span class="card__icon icon-calendar"></span>02.06.2019;</span>        <span class="card__price"><span class="card__icon icon-price--sm"></span>8.00 лв; 10.00 лв; 12.00лв;</span>      </div>      <div class="card__buttons">        <a class="button card__button" href="./spectacle.html">Виж повече</a>        <a class="button button--plum button--buy card__button" href="">Купи билет <span class="button__icon icon-price"></span></a>      </div>    </div>  </div>
  <div class="card">    <div class="card__imgContainer">      <img class="card__img" src="https://www.pierrot-bg.com/images/news/Meko-kazano_1.jpg" alt="Меко казано" style="">    </div>    <div class="card__content">      <h2 class="card__heading">Lorem, ipsum.</h2>      <div class="card__info">        <span class="card__time"><span class="card__icon icon-calendar"></span>02.06.2019;</span>        <span class="card__price"><span class="card__icon icon-price--sm"></span>8.00 лв; 10.00 лв; 12.00лв;</span>      </div>      <div class="card__buttons">        <a class="button card__button" href="./spectacle.html">Виж повече</a>        <a class="button button--plum button--buy card__button" href="">Купи билет <span class="button__icon icon-price"></span></a>      </div>    </div>  </div>
</div>

Image in flexbox column not rendering properly in Chrome

There are flexbox rendering variations between the major browsers.

When dealing with images, the number of variations grows.

What I've found to work consistently across browsers is to not use img elements in a flex formatting context (i.e., don't make them flex items).

Instead, wrap an img in a div element, making the div the flex item and keeping the image in a block formatting context.

#container {  display: flex;  align-items: center;  align-content: center;  text-align: center;  flex-direction: column;  border: solid 2px red;  height: 300px;  width: 400px;}
#container > div {  flex: 0 0 50%;  /* 1 */  min-height: 0;  /* 2 */}
img {  height: 100%;}
p {  flex-basis: 50%;  border: solid 2px green;}

<div id="container">  <div>    <img src="https://image.freepik.com/free-icon/apple-logo_318-40184.jpg" />  </div>  <p>    This is my text  </p></div>

max-width of image not working in flexbox for IE 11 but works on google chrome

IE browser has some issues with Flex. It is not able to calculate the values properly with flex.

(1) I suggest you replace max-width with width in .detail img class.

(2) I suggest you replace flex: 1 0 0; with flex: 0 0 auto; in .detail class.

Edit:-

Added img tag inside one extra div solved the issue as informed by @Xegara. It also worked with max-width For IE 11 browser.

Modified code:

<!DOCTYPE html><html>
<head>    <script src="script.js"></script>    <style>        body {          width: 100%;        }         .extra_div{          width: 100%;        }
        .element {            display: flex;            flex-direction: row;            width: 100%;          }                .name {            display: flex;            align-items: center;            justify-content: center;            flex: 0 0 100px;              font-weight: bolder;        }                .detail-wrapper {            display: flex;            flex-direction: column;           /*flex: 0 0 auto;*/              width: 100%;        }                .detail {            display: flex;            /*flex: 1 0 0;*/            flex: 0 0 auto; /*-------------------------made change here */            align-items: center;            justify-content: center;            flex-wrap: wrap;        }                .detail img {            max-width: 100%;   /*-------------------------made change here */        }                .name, .detail {            border: 1px solid;            margin: 8px;            padding: 8px;            text-align: center;            word-break: break-word;        }    </style></head>
<body>    <div class="element">        <div class="name">name</div>        <div class="detail-wrapper">            <div class="detail">  <div class="extra_div">                 <img src="https://miro.medium.com/max/1200/1*y6C4nSvy2Woe0m7bWEn4BA.png" />  </div>            </div>            <div class="detail">                <a href="#">url</a>            </div>        </div>    </div></body>
</html>

Image inside flex-item ignores max-height:100% in chrome and firefox - (works in safari)

The problem is that both the image and its containing block have

max-height: 100%;

Instead, remove the max for the containing block:

.flex-item {
    width: 100%;
    height: 100%;
}

html,body {  height: 100%;  margin: 0;}.flex-container {  display: flex;  align-items: center;  justify-content: center;  width: 100%;  height: 100%;  background: green;}.flex-item {  width: 100%;  height: 100%;}img {  max-width: 100%;  max-height: 100%;}

<div class="flex-container">  <div class="flex-item">    <img src="http://i.stack.imgur.com/mrEyQ.jpg">  </div></div>

Image extends height of flex parent, but behaves with a weird hack in chrome and safari

Is this what you are looking to do?
You can also see it here: https://codepen.io/teanbiscuits/pen/GRJmPgo

#parent {  height: 100vh;  display: grid;  grid-template-columns: 1fr;  grid-template-rows: 1fr auto;  border:2px solid green;  border-radius:20px;  overflow:hidden;}
#child {  position:relative;}
#child img {  position:absolute;  width: 100%;  height: 100%;  object-fit: contain;}
#text {  background-color:green;}

<div id="parent">  <div id="child">    <img src="https://i.picsum.photos/id/1005/400/1000.jpg" />  </div>  <div id="text">    <h2>some title here</h2>    <p>Some description here</p>  </div></div>

Resizing images within flexbox render incorrectly in Chrome

you container is resizing, but the img is overflowing.

You need to add width:100% to your img, so it resizes to whatever width the container has.

.videoImage{
  width:100%;
  height:100%;
}

It seems in the absense of a width declaration for the image itself, Firefox is resizing the img to the container, while Chrome is just keeping the image actual width.

Image Height Inside Flexbox Not Working in Chrome