内部柔性容器时图像的高度增加(Image's height increases when inside flex container)

当我将div.container的样式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> 
  
 
When I change the style of div.container to display: flex, the images height increases. How do I stop this from happening?
 
Before:
 
 
 
  
  
$('.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> 
  
 
 
After:
 
 
 
  
  
$('.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> 
  
 

                
最满意答案
                
                    
                        
 display: flex元素将具有样式align-items: stretch默认为align-items: stretch 。 您可以将其更改为align-items: flex-start以避免您的子元素与其最高兄弟的高度相匹配。 
A display: flex element will have the style align-items: stretch by default. You can change that to align-items: flex-start to avoid your child elements matching the height of their tallest sibling.