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

Posted

技术标签:

【中文标题】img 设置 flex-grow 来填充 flex 容器的剩余空间，它会导致 flex 内部溢出 flex 容器 [重复]【英文标题】：img set flex-grow to fill flex container rest space, it cause flex inner overflow flex container [duplicate] 【发布时间】：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 它有效，请告诉我为什么有效 检查重复项 【参考方案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>

或者你可以使用&lt;figure&gt; & &lt;figcaption&gt;：

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

【讨论】：

以上是关于img 设置 flex-grow 来填充 flex 容器的剩余空间，它会导致 flex 内部溢出 flex 容器 [重复]的主要内容，如果未能解决你的问题，请参考以下文章

Bootstrap 4 使用 flex-grow 使嵌套的行填充父级填充视口高度

flex布局中flex-basis|flex-grow|flex-shrink

flex-grow 在 Internet Explorer 11 中不起作用 [关闭]

Flex弹性盒子中`flex-grow`,`flex-shrink`,`flex-basis`的区别

flex-grow 和 width 有啥区别？

有没有一种方法（公式）来计算用 flex-grow、flex-shrink 和 flex 基础描述的 flex 元素的绝对大小？