Skip to content Skip to sidebar Skip to footer
Home / Css / Flexbox / Frontend / Html / Javascript

Img Set Flex-grow To Fill Flex Container Rest Space, It Cause Flex Inner Overflow Flex Container

Post a Comment
following is my code, 'text1' overflow the flex container, I expect img + text in flex container and img fill flex container rest

Solution 1:

add this code to image your code

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

Solution 2: 

/* 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>

Solution 3:

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!


Post a Comment for "Img Set Flex-grow To Fill Flex Container Rest Space, It Cause Flex Inner Overflow Flex Container"