img set flex-grow to fill flex container rest space, it cause flex inner overflow flex container

Question

following is my code, "text1" overflow the flex container, I expect img + text in flex container and img fill flex container rest

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!--mobile friendly-->
    <meta name="viewport" content="width=device-width, user-scalable=yes">
    <style>
        .c {
            display: flex;
            flex-direction: column;
            width: 100px;
            height: 100px;
            border: 5px solid lightblue;
        }

        .c img {
            flex-grow: 1;
            object-fit: contain;
        }
    </style>
</head>
<body>
<div class="c">
    <img src="./img.jpg"/>
    <div>text1</div>
</div>
</body>
</html>

the result is:

if element is not img and is div, flex-grow: 1 will fill flex rest space, I'm confused why img cause inner overflow

following is my "img.jpg"

try min-height:0 to the image – Temani Afif Oct 20 '21 at 11:18 — Temani Afif, Oct 20 '21 at 11:18
@TemaniAfif it work, please tell me why it work – chikadance Oct 20 '21 at 14:14 — chikadance, Oct 20 '21 at 14:14

score 0 · Answer 1 · answered Oct 20 '21 at 11:03

0

add this code to image your code

.c img{
   flex-grow: 1;
   object-fit: contain;
   flex-basis:100%;
   width:100%;
}

answered Oct 20 '21 at 11:03

Majid Ahmadi

127
5

score 0 · Answer 2 · answered Oct 20 '21 at 11:37

/* CSS */

.c {
  width: 100px;
  height: 100px;
  border: 5px solid lightblue;
  position: relative;
  text-align: center;
}
.c img {
  width: 100%;
}
.c div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: red;
}

<!-- HTML -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=yes">
  </head>
  <body>
    <div class="c">
      <img src="https://i.stack.imgur.com/P5N3A.jpg" />
      <div>text1</div>
    </div>
  </body>
</html>

Sigurd Mazanti · Answer 3 · 2021-10-20T11:27:27.667

My apologies, I misunderstood your question.

There are simpler ways to do this. You could do it with background-image:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <!--mobile friendly-->
  <meta name="viewport" content="width=device-width, user-scalable=yes">
  <style>
    .c {
      display: flex;
      flex-direction: column;
      width: 100px;
      height: 100px;
      background-image: url('https://i.stack.imgur.com/P5N3A.jpg');
      background-repeat: no-repeat;
      background-size: contain;
    }
  </style>
</head>

<body>
  <div class="c">
    <div>text1</div>
  </div>
</body>

</html>

Or you could do it with <figure> & <figcaption>:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <!--mobile friendly-->
  <meta name="viewport" content="width=device-width, user-scalable=yes">
  <style>
    .c {
      display: flex;
      width: 100px;
      height: 100px;
      position: relative;
    }

    figcaption {
      color: white;
      position: absolute;
      bottom: 0;
      left: 0;
    }
  </style>
</head>

<body>
  <figure class="c">
    <img src="https://i.stack.imgur.com/P5N3A.jpg">
    <figcaption>text1</figcaption>
  </figure>
</body>

</html>

Hope this helps!

img set flex-grow to fill flex container rest space, it cause flex inner overflow flex container

3 Answers3

Linked

Related