在 flex 容器内时图像的高度会增加

Question

当我将div.container 的样式更改为display: flex 时，图像高度会增加。我该如何阻止这种情况发生？

之前：

$('.text').prev('img').css('height',$('.text').outerHeight());

div.container {
  border: 1px solid;
}
img {
  float: left;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<div class="container">
  <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzg2Mjg1OTk0NF5BMl5BanBnXkFtZTcwMjQ4MTA3Mw@@._V1_SX300.jpg" alt="RED" />
  <div class="text">
    <h2>Red</h2>
    <p>When his peaceful life is threatened by a high-tech assassin, .</p>
  </div>
</div>

之后：

$('.text').prev('img').css('height',$('.text').outerHeight());

div.container {
  border: 1px solid;
  display: flex;
}
img {
  float: left;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<div class="container">
  <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzg2Mjg1OTk0NF5BMl5BanBnXkFtZTcwMjQ4MTA3Mw@@._V1_SX300.jpg" alt="RED" />
  <div class="text">
    <h2>Red</h2>
    <p>When his peaceful life is threatened by a high-tech assassin, .</p>
  </div>
</div>

Answer 1

display: flex 元素默认具有align-items: stretch 样式。您可以将其更改为 align-items: flex-start 以避免您的子元素与其最高兄弟的高度匹配。