Question 45926 in CSS Question posted in
Some basic documentation can be found here.

Constrain flex image by height works in Firefox but not Brave/Safari (webkit bug?) – CSS

How can I get this height constraint to work on webkit, just like FF (left)?

Left, firefox = good

Right, brave/safari = bad

Code:
https://codepen.io/flapusmog/pen/RwYvzvq

.f {
  height:250px;
  width:250px;
  border:1px solid red;
}

.t {
  font-size:50px;
}

img {
  height:100%;
  width:100%;
  object-fit:contain;
  
  /* not working */
  flex-shrink:1; 
}

.flex {
  display:flex;
  flex-direction: column;
}
<div class="f flex">
  <div class="t">
    Some<br>text
  </div>
  <img src="https://picsum.photos/200/300">
</div>

enter image description here

thanks, J

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The answer is to add min-height:0 on the image


  2. 0

    When you give img height 100%, it means that you give it 250px. That’s why there is the overflow.
    Can you try this code.

    .f {
    height:250px;
    width:250px;
    border:1px solid red;
}

.t {
    font-size:50px;
}

img {
    display: none;
    height: 100%;
    width:100%;
    object-fit:contain;
  
    /* not working */
    flex-shrink:1; 
}

.flex {
    display:flex;
    flex-direction: column;
}

.img {
    background-image: url(https://picsum.photos/200/300);
    background-size: contain;
    background-repeat: no-repeat;
    height: 100%;
    background-position: center;
}
    <div class="f flex">
    <div class="t">
        Some<br>text
    </div>
    <div class="img">
        <img src="https://picsum.photos/200/300">
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search