Question

我有一个容器，它有一个标题标记和一个div。当容器具有100vh高度时，div消耗剩余空间。在div中还有两个div，一切都运行正常，但是当我向右边的div添加更多内容并缩小浏览器窗口时，溢出了父div，我使用flex框，所以它应该包装内容和原来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

max-height: 400px;上有.slide-content。我相信你只想在.slide-image上找到这个？

你说

原始div的高度应相应增加以包裹其元素

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

Flexbox不再需要添加更多内容

1 个答案: