Html CSS溢出自动不'；当容器具有最小和最大高度时，不工作

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

内部有两个列样式div，一个宽度为80%，另一个宽度为20%

80%的将有一个

.集装箱{
最小宽度：420px；
最小高度：316px；
最大高度：337px；
最大宽度：540像素；
}
.主画廊{
宽度：79%；
显示：内联块；
垂直对齐：顶部；
最大高度：继承；
身高：100%；
文本对齐：居中；
}
.画廊名单{
宽度：20%；
溢出：自动；
显示：内联块；
垂直对齐：顶部；
身高：继承；
最大高度：100%；
}
.画廊名单{
宽度：100%；
高度：自动；
保证金：5px0；
边界半径：5px；
}
.img集装箱{
身高：继承；
宽度：100%；
显示：内联块；
最大高度：继承；
}
.img容器img{
边界半径：5px；
最大高度：100%；
最大宽度：100%；
}

---

解决方案是在容器上设置相对位置，在行为不端的div上设置绝对位置。（看起来，CSS并不是一门精确的科学）。使用解决方案更新了Plunker，以便其他人可以找到它：

编辑：这是我的一个片段。我想这正是你想要的

.集装箱{
最小宽度：420px；
最小高度：316px；
最大高度：337px；
最大宽度：540像素；
位置：相对位置；
}
.主画廊{
宽度：79%；
显示：内联块；
垂直对齐：顶部；
最大高度：继承；
身高：100%；
文本对齐：居中；
}
.画廊名单{
宽度：20%；
溢出：自动；
显示：内联块；
垂直对齐：顶部；
身高：继承；
最大高度：100%；
位置：绝对位置；
}
.画廊名单{
宽度：100%；
高度：自动；
保证金：5px0；
边界半径：5px；
}
.img集装箱{
身高：继承；
宽度：100%；
身高：100%；
显示：内联块；
}
.img容器img{
边界半径：5px；
身高：100%；
宽度：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="">
    </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
库列表中
请尝试此代码

如果使用
溢出：滚动
使用下面的代码

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

或者如果您使用
溢出：auto使用此

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


.container{
最小宽度：420px；
最小高度：316px；
最大高度：337px；
最大宽度：540像素；
}
.主画廊{
宽度：79%；
显示：内联块；
垂直对齐：顶部；
最大高度：继承；
身高：100%；
文本对齐：居中；
}
.画廊名单{
宽度：20%；
溢出：自动；
显示：内联块；
垂直对齐：顶部；
身高：继承；
最大高度：100%；
位置：固定；
}
.画廊名单{
宽度：100%；
高度：自动；
保证金：5px0；
边界半径：5px；
}
.img集装箱{
身高：继承；
宽度：100%；
显示：内联块；
最大高度：继承；
}
.img容器img{
边界半径：5px；
最大高度：100%；
最大宽度：100%；
}

这没有帮助。如果有什么的话，那会让事情变得更糟。我不能硬编码300px的固定高度。“位置修正”并没有修正我的答案-我认为它解决了你的问题。你的解决方案奏效了。将相对位置和绝对位置添加到容器和.gallery列表中就达到了目的。但我不知道为什么它会起作用。如果你能解释一下原因，那就太好了。我相信这是因为集装箱没有足够的高度。它有“最大高度”和“最小高度”，但它不像显式高度那样尊重这些。或者，这是我从多年的CSS经验中得到的。摆弄自己的位置似乎是解决这类奇怪事情的一种方法，而这些奇怪的事情违背了你的常识。.container将具有完整的高度，但没有为其指定高度。我相信这是有充分理由的。我会看看我能挖掘到什么，因为我现在很感兴趣。我在.gallery主类中也有类似的问题。具有长垂直高度的图像溢出到容器（.img容器）外部，而不是缩放以适应容器。我将img的最大高度和最大宽度设置为100%；但他们不受尊重。请看一下.img container和“.img container img”试试看-我刚刚删除了最大高度和最大宽度-但我不明白你在说什么。您可能需要调整这些元素的位置。最大宽度和最大高度很重要。如果没有它们，图像将伸展开来，打破纵横比。我只是用了同样的姿势技巧，得到了我想要的。在此处更新了plunker：
 .gallery-list {
    width: 20%;
    overflow: auto;
    display: inline-block;
    vertical-align: top;
    height: inherit;
    max-height:100%;
    position:fixed;
  }