html - 图像超出 flex 父尺寸

Question

<分区>

Answer 1

为了让它工作 .half div 也需要是一个 flexbox 容器并且图像需要有 min-height: 0，正如解释的 here .

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