img 设置 flex-grow 来填充 flex 容器的剩余空间，它会导致 flex 内部溢出 flex 容器 [重复]答案

【问题标题】：img set flex-grow to fill flex container rest space, it cause flex inner overflow flex container [duplicate]img 设置 flex-grow 来填充 flex 容器的剩余空间，它会导致 flex 内部溢出 flex 容器 [重复]
【发布时间】：2021-12-07 04:45:42
【问题描述】：

以下是我的代码，“text1”溢出 flex 容器，我希望 flex 容器中的 img + text 和 img 填充 flex 容器休息

<!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>

结果是：

如果元素不是 img 并且是 div，flex-grow: 1 将填充 flex rest 空间，我很困惑为什么 img 会导致内部溢出

下面是我的“img.jpg”

【问题讨论】：

尝试 min-height:0 到图像
@TemaniAfif 它有效，请告诉我为什么有效
检查重复项

标签： javascript html css flexbox frontend

【解决方案1】：

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

【讨论】：

【解决方案2】：

抱歉，我误解了你的问题。

有更简单的方法可以做到这一点。你可以用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>

或者你可以使用<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>

希望这会有所帮助！

【讨论】：

【解决方案3】：

添加此代码以映像您的代码

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

【讨论】：