Flexbox在添加更多内容时不会拉伸

Question

我有一个容器，它有一个头标签和一个div。div会消耗剩余的空间，因为容器的高度为100VH。在div中还有两个div，一切正常，但当我向右侧的div添加更多内容并缩小浏览器窗口时，它会溢出父div，我使用了flex box，所以它应该包装内容，而原始div的高度应该相应增加以包装它的元素，但它没有发生。

HTML：

    <div class="holder">
     <h1>Work Slides</h1>
     <div class="slides">
     <div class="slide-image">
      <img src='' alt=''>
     </div>
     <div class="slide-content">
      <span>Image Name</span>
      <div>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illo, magni eos nam in suscipit ex reiciendis, ea repellat cumque minus amet maiores ipsam dolorum dolore mollitia. Architecto eos adipisci blanditiis.
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illo, magni eos nam in suscipit ex reiciendis, ea repellat cumque minus amet maiores ipsam dolorum dolore mollitia. Architecto eos adipisci blanditiis.
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illo, magni eos nam in suscipit ex reiciendis, ea repellat cumque minus amet maiores ipsam dolorum dolore mollitia. Architecto eos adipisci blanditiis. 
      </div>
    </div>
  </div>
</div>
<span>Page-2</span>

CSS：

*{
  box-sizing: border-box;
}
html,body{
  margin: 0;
}
.holder{
  height: 100vh;
  max-height: 100%;
  background: royalblue;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.slides{
  background: palevioletred;
  display: flex;
  justify-content: center;
  width: 100%;
  flex-wrap: wrap;
  height: 100%;
}
.slide-image, .slide-content{
  max-height: 400px;
  background: orange;  
}
.slide-image img{
  height: 100%;
  width: 400px;
  max-width: 100%;
}
.slide-content{
  width: 400px;
  padding: 2%;
  display: flex;
  flex-direction: column;
}

我在这里做错了什么？是最小-最大高度/宽度吗？

Answer 1

您在.slide-content上有max-height:400px；。我相信您只想在.slide-image上看到这个？

你说

原始div的高度应该相应地增加以包装其元素

但当父div具有最大高度时,这并不总是正确的。