图像超出弹性父尺寸

Question

<img>我在弹性父级内部变得灵活时遇到问题。图像开始超过父尺寸。我想留给父母并display: flex;限制图像跨越父母的尺寸。

.full
{
  width: 400px;
  height: 200px;
  background-color: blue;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.half
{
  width: 50%;
  background-color: red;
  padding: 20px;
}
img
{
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

<div class="full">
  <div class="half">
          <h1>title</h1>
          <img src="http://placehold.it/90x200">
  </div>
</div>

您能否解释并提供一些有用的链接来解释所显示的行为及其可能的解决方案？

我使用 Firefox 和 Chrome 来查看该内容。两个浏览器中均存在问题。

---

看来这个问题是这个问题的重复

Answer 1

为了使其工作，.halfdiv 还需要是一个 Flexbox 容器，并且图像也需要具有min-height: 0，如此处所述。

.full
{
  width: 400px;
  height: 200px;
  background-color: blue;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.half
{
  width: 50%;
  background-color: red;
  padding: 20px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
}
img
{
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
}

<div class="full">
  <div class="half">
    <h1>title</h1>
    <img src="http://placehold.it/90x200">
  </div>
</div>