DIV容器没有高度

Question

I have the following CSS which makes images break row after it reaches the end of the DIV but the DIV container behind it is not taking height according to the images. The height should expand along with the images. Here is the screenshot http://prnt.sc/e3fqvr.

CSS:

.image-container {
    width: 163px;
    height: 100px;
    padding: 0px 0px 65px 0px;
    font-size: 12px;
    text-align: center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    margin-right: 13px;
    display: inline-block;
    float: left;
}

.proof-container {
    width: 100%;
    position: absolute;
}

.container {
    width: 100%;
    min-height: 500px;
}

.container-inside {
    border: 1px solid #1df2f2;
    width: 100%;
    border-radius: 5px;
    margin-top: 10px;   
    padding: 20px;
    box-sizing: border-box;
}

HTML:

<div class="container">
    <div class="container-inside">
      <div class="container-title">Images</div>
      <br>
      <div class="proof-container">
        <?php while($faf = $prooq->fetch()){ extract($faf); ?>
        <div class="image-container"> <img class="myThumb" id="myImg" src="https://wallpaperstock.net/wallpapers/thumbs1/45957hd.jpg" alt="" width="160" height="100">
          <div class="image-text">shreyansh ($8.75)<br>
            <span><?php echo date('jS M, Y (h:i a)', strtotime($pr_uptime)); ?></span></div>
        </div>
        <div id="myModal" class="modal"> <span class="close">&times;</span> <img class="modal-content" id="modalImg">
          <div id="caption"></div>
        </div>
        <?php } ?>
      </div>
    </div>
  </div>

Please help me devs.

Answer 1

Try to remove css property

 position:absolute from proof-container

And add

overflow:hidden to .container-inside div