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

I have a container div with min and max height.

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

Inside there are 2 column style divs one with width 80% and other 20%

里面有两列风格的div，宽度为80%，其他为20%。

The one with 80% will have an <img /> taking full height and width of its container.

有80%的将有一个当容器有最小和最大高度时，CSS溢出自动不工作。，其容器的高度和宽度。

The 20% one will have thumbnails. I set overflow auto on this one so that user can scroll through thumbnails and select one, but overflow auto is not having any effect. I cannot set exact height of container as it must be variable.

20%的人会有缩略图。我在此设置溢流自动，这样用户可以滚动缩略图并选择一个，但是溢出自动没有任何效果。我不能设置准确的容器高度，因为它必须是变量。

How can I get a overflow with scroll bar working in the div with thumbnails ?

如何使用缩略图在div中使用滚动条进行溢出?

Please refer to this plunker: https://plnkr.co/edit/el2KNvEJdpUfA6v24uTV?p=preview

请参考这个插入器:https://plnkr.co/edit/el2knvejdpufa6v24utv?

Code:

代码:

<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>

Solution was to have position of relative on container and absolute on the misbehaving divs. (It appears, CSS is not exact science). Updated Plunker with solution so others can find it: https://plnkr.co/edit/el2KNvEJdpUfA6v24uTV?p=preview

解决方案是在容器上有相对的位置，对行为不端的人绝对是绝对的。(看来，CSS并不是精确的科学)。更新后的插塞式解决方案，让其他人可以找到它:https://plnkr.co/edit/el2knvejdpufa6v24utv?

3 个解决方案

#1

EDIT: Here's a snippet for mine. I think this does what you want.

编辑:这是我的一个片段。我想这就是你想要的。

<!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>

#2

Try this:

试试这个:

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

Use position:fixed; on div gallery-list.

使用位置:固定;在div gallery-list。

#3

please try this code.

请试试这个代码。

if you use overflow: scroll use below code

如果使用溢出:在代码下面使用滚动。

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

or if you use overflow: auto; use this

或者如果使用溢出: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>

#1