flexbox 中的图像标签导致溢出

Question

我正在使用 Tailwind 并尝试在具有固定高度的容器内创建一个四分之一的弹性盒。

弹性盒不应超出固定高度。它工作得很好，直到我添加一个

img

元素。然后弹性盒会增长到容器的固定高度之上。这只会发生在

img

元素上。即使我将它们的高度设置为 1%，它也会导致弹性盒溢出。如果我限制图像元素本身的宽度，我可以解决这个问题。但我希望图像限制为父元素的 100% 宽度/100% 高度（并在保留纵横比的情况下进行缩放）。

我还读到图像元素和 Flexbox 有一些奇怪的行为。推荐的解决方案是将图像元素放入另一个 div 容器中。但这要么会导致矢量图像出现问题，要么会导致与弹性盒溢出相同的问题。

.icon {
  height: 100%;
  width: 25%;
}

.icon > img {
  height: 25%;
  width: auto;
}

.line-red {
  outline: 1px solid red;
}
.line-green {
  outline: 1px solid green;
}

.line-blue {
  outline: 1px solid blue;
}

.line-orange {
  outline: 1px solid orange;
}

.line-purple {
  outline: 1px solid purple;
}

<script src="https://cdn.tailwindcss.com"></script>
<div class="h-screen"> <!-- Demonstration purpose only -->
  <div class="h-3/4 w-3/4 overflow-auto line-red" style="min-height: 75%;"> <!-- Demonstration purpose only -->
    <div class="flex flex-col align-center h-full">
      <div class="text-center">Title</div>
      <div class="flex flex-wrap self-center h-full w-3/4">
          
        <div class="w-full h-1/4 line-green">
          <div class="icon">
            Box 1
          </div>
        </div>    
          
        <div class="w-full h-1/4 line-blue">
          <div class="icon">
            Box 2
          </div>
        </div> 
          
        <div class="w-full h-1/4 line-orange">
          <div class="icon">
             <img src="https://svgur.com/i/kDQ.svg" />
          </div>
        </div> 
          
        <div class="w-full h-1/4 line-purple">
          <div class="icon">
            Box 4
          </div>
        </div> 
    
      </div>
    </div>
  </div>
</div>

Answer 1

您必须为祖父母容器设置“overflow:hidden”。您可能希望这会导致图像被切断，但这种情况不会发生。图像将会缩小。 Flexbox 中的 img 行为很奇怪。他们把事情搞砸了。经过长时间的尝试和错误，我找到了这个解决方案。