当容器具有最小和最大高度时，CSS溢出自动不起作用答案

【问题标题】：CSS overflow auto doesn't work when container has min and max height当容器具有最小和最大高度时，CSS溢出自动不起作用
【发布时间】：2023-04-07 05:32:01
【问题描述】：

我有一个具有最小和最大高度的容器 div。

里面有 2 个列样式 div，一个宽度为 80%，另一个为 20%

占 80% 的那个将有一个 <img /> 占据其容器的全高和全宽。

20% 的人会有缩略图。我在这个上设置了溢出自动，以便用户可以滚动浏览缩略图并选择一个，但溢出自动没有任何效果。我无法设置容器的确切高度，因为它必须是可变的。

如何在带有缩略图的 div 中使用滚动条溢出？

请参考此插件：https://plnkr.co/edit/el2KNvEJdpUfA6v24uTV?p=preview

代码：

<div class="container">
    <div class="gallery-main">
      <div class="img-container">
        <img src="http://lorempixel.com/800/600" alt="">
      </div>
    </div>
    <div class="gallery-list">
        <img src="http://lorempixel.com/800/600?test=1" alt="">
        <img src="http://lorempixel.com/800/600?test=2" alt="">
        <img src="http://lorempixel.com/800/600?test=3" alt="">
    </div>
</div>
<style>
 .container{
    min-width: 420px;
    min-height: 316px;
    max-height: 337px;
    max-width: 540px;
}
.gallery-main{
    width: 79%;
    display: inline-block;
    vertical-align: top;
    max-height: inherit;
    height: 100%;
    text-align: center;
}
.gallery-list {
    width: 20%;
    overflow: auto;
    display: inline-block;
    vertical-align: top;
    height: inherit;
    max-height:100%;
}

.gallery-list img {
    width: 100%;
    height: auto;
    margin: 5px 0;
    border-radius: 5px;
}
.img-container {
    height: inherit;
    width: 100%;
    display: inline-block;
    max-height: inherit;
}
.img-container img {
    border-radius: 5px;
    max-height: 100%;
    max-width:100%;
}
</style>

解决方案是在容器上设置相对位置，在行为不端的 div 上设置绝对位置。（看来，CSS 不是精确的科学）。用解决方案更新了 Plunker，以便其他人可以找到它：https://plnkr.co/edit/el2KNvEJdpUfA6v24uTV?p=preview

【问题讨论】：

请检查我的答案 - 我认为它解决了你的问题。

标签： html css

【解决方案1】：

编辑：这是我的一个 sn-p。我认为这可以满足您的需求。

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <style>
.container{
      min-width: 420px;
    min-height: 316px;
    max-height: 337px;
    max-width: 540px;
    position: relative;
}
.gallery-main{
    width: 79%;
    display: inline-block;
    vertical-align: top;
    max-height: inherit;
    height: 100%;
    text-align: center;
}
.gallery-list {
    width: 20%;
    overflow: auto;
    display: inline-block;
    vertical-align: top;
    height: inherit;
  max-height:100%;
  position: absolute;
}

.gallery-list img {
    width: 100%;
    height: auto;
    margin: 5px 0;
    border-radius: 5px;
}
.img-container {
    height: inherit;
    width: 100%;
    height: 100%;
    display: inline-block;
}
.img-container img {
    border-radius: 5px;
    height: 100%;
    width:100%;
}
    </style>
  </head>

  <body>
    <div class="container">
    <div class="gallery-main">
      <div class="img-container">
        <img src="http://lorempixel.com/800/600" alt="">
      </div>
    </div>
    <div class="gallery-list">
        <img src="http://lorempixel.com/800/600?test=1" alt="">
        <img src="http://lorempixel.com/800/600?test=2" alt="">
        <img src="http://lorempixel.com/800/600?test=3" alt="">
        <img src="http://lorempixel.com/800/600?test=4" alt="">
        <img src="http://lorempixel.com/800/600?test=5" alt="">
        <img src="http://lorempixel.com/800/600?test=6" alt="">
        <img src="http://lorempixel.com/800/600?test=7" alt="">
        <img src="http://lorempixel.com/800/600?test=8" alt="">
        <img src="http://lorempixel.com/800/600?test=9" alt="">
        <img src="http://lorempixel.com/800/600?test=10" alt="">
        <img src="http://lorempixel.com/800/600?test=11" alt="">
    </div>
  </div>
  </body>

</html>

【讨论】：

您的解决方案非常有效。将相对位置和绝对位置添加到容器和 .gallery-list 就可以了。我不确定它为什么会起作用。如果您能解释原因，那就太好了。
我相信这是由于容器的高度不足。它有最大高度和最小高度，但它不像明确的高度那样尊重这些。或者，这就是我从多年的 CSS 经验中收集到的。摆弄位置似乎是解决此类奇怪事情的一种解决方案，这些事情违背了您认为可行的常识。 .container 将占据整个高度，而无需为其指定高度。我确信这是有充分理由的。我会看看我能挖掘什么，因为我现在很感兴趣。
我的 .gallery-main 类也有类似的问题。具有长垂直高度的图像溢出容器（.img-container）而不是缩放以适应容器。我将 img 设置为最大高度和最大宽度为 100%；但他们没有受到尊重。请看一下 .img-container 和 ".img-container img"
试试看 - 我刚刚删除了 max-height 和 max-width - 不过我不明白你在说什么。您可能需要在这些元素上使用位置。
最大宽度和最大高度很重要。没有它们，图像会伸展，打破纵横比。我只是使用了相同的位置技巧并得到了我想要的。在这里更新了 plunker：plnkr.co/edit/el2KNvEJdpUfA6v24uTV?p=preview

【解决方案2】：

试试这个：

  .gallery-list {
    width: 20%;
    overflow: auto;
    display: inline-block;
    vertical-align: top;
    height: inherit;
    max-height:100%;
    position:fixed;
  }

在div gallery-list 上使用position:fixed;。

【讨论】：

那没有帮助。如果有的话，它会让事情变得更糟。

【解决方案3】：

请试试这个代码。

如果您使用overflow: scroll，请使用以下代码

.gallery-list {
    width: 20%;
    overflow: scroll;
    display: inline-block;
    vertical-align: top;
    height: 300px;
  }

或者如果您使用overflow: auto;，请使用此

 .gallery-list {
    width: 20%;
    overflow: auto;
    display: inline-block;
    vertical-align: top;
    height: inherit;
    max-height:100%;
    position:fixed;
  }

   .container{
      min-width: 420px;
    min-height: 316px;
    max-height: 337px;
    max-width: 540px;
}
.gallery-main{
  width: 79%;
    display: inline-block;
    vertical-align: top;
    max-height: inherit;
    height: 100%;
    text-align: center;
}
 .gallery-list {
    width: 20%;
    overflow: auto;
    display: inline-block;
    vertical-align: top;
    height: inherit;
    max-height:100%;
    position:fixed;
  }

.gallery-list img {
    width: 100%;
    height: auto;
    margin: 5px 0;
    border-radius: 5px;
}
.img-container {
    height: inherit;
    width: 100%;
    display: inline-block;
    max-height: inherit;
}
.img-container img {
    border-radius: 5px;
    max-height: 100%;
    max-width:100%;
}

<div class="container">
    <div class="gallery-main">
      <div class="img-container">
        <img src="http://lorempixel.com/800/600" alt="">
      </div>
    </div>
    <div class="gallery-list">
        <img src="http://lorempixel.com/800/600?test=1" alt="">
        <img src="http://lorempixel.com/800/600?test=2" alt="">
        <img src="http://lorempixel.com/800/600?test=3" alt="">
        <img src="http://lorempixel.com/800/600?test=4" alt="">
        <img src="http://lorempixel.com/800/600?test=5" alt="">
        <img src="http://lorempixel.com/800/600?test=6" alt="">
        <img src="http://lorempixel.com/800/600?test=7" alt="">
        <img src="http://lorempixel.com/800/600?test=8" alt="">
        <img src="http://lorempixel.com/800/600?test=9" alt="">
        <img src="http://lorempixel.com/800/600?test=10" alt="">
        <img src="http://lorempixel.com/800/600?test=11" alt="">
    </div>
  </div>

【讨论】：

我不能硬编码 300px 的固定高度。固定位置没有解决它