Max-height overflow issue

Question

I am working on a modal window, trying to get its height to set automatically (with a max-height previously set). But, when the height is set to 'auto', the inner div does not create a scroll bar, making it impossible to read its content.

The question is: How could I have a automatic height, while maintaining the inner scroll bar?

I made a fiddle to demonstrate: https://jsfiddle.net/x1um8tqz/6/

Here is the modal basic structure:

<div class="fade">
  <div class="modal">
    <div class="modal-contents">
      <div class="modal-header">
        Header
      </div>
      <div class="modal-body">
           <!-- variable contents here -->
      </div>
    </div>
  </div>
</div>

And the CSS:

.fade {
  position: fixed; 
  background: rgba(0,0,0,0.4); 
  width: 100%; 
  height: 100%; 
  top: 0; 
  left: 0;
}

.modal {
  position: absolute;
  background: #fff; 
  border-radius: 5px;
  width: 400px;
  max-height: calc(100% - 100px);
  height: auto;
  /* Works but window will be always max height */
  /*height: calc(100% - 100px);*/
  top: 50px; 
  left: calc(50% - 200px);
  overflow: hidden;
}

.modal-contents {
  position: relative; 
  width: 100%; 
  height: 100%;
}

.modal-header {
  height: 25px;
  padding: 0 10px;
  line-height: 25px;
}

.modal-body {
  height: calc(100% - 25px);
  overflow: auto;
}

Answer 1

Update 2

Perhaps this is a little more what you wanted?

.fade {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
}
.modal {
  width: 80%;
  margin: 0 auto;
}
.modal-contents {
  margin: 100px 5px;
  padding: 5px;
  border-radius: 5px;
  background-color: white;
  min-height: 1px;
}
.modal-header {
  font-weight: 600;
  height: 25px;
  line-height: 25px;
}
.modal-body {
  min-height: calc(100% - 25px);
  max-height: 80vh;
  overflow: auto;
}

<div class="fade">
  <div class="modal">
    <div class="modal-contents">
      <div class="modal-header">
        Header
      </div>
      <div class="modal-body">
        <!-- Example content -->
        Test
        <br/>123
        <br/>Test
        <br/>123
        <br/>Test
        <br/>123
        <br/>Test
        <br/>123
        <br/>Test
        <br/>123
        <br/>Test


        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, ipsa.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, odio!</p>
        <p>Incidunt consequuntur consectetur praesentium, optio nulla maiores maxime culpa quisquam?</p>
        <p>Perferendis similique cupiditate cum expedita mollitia temporibus quam doloremque nemo.</p>
        <p>Temporibus aperiam cumque amet, necessitatibus modi repudiandae! Tenetur, magni, error!</p>
        <p>Expedita et libero tenetur consequatur explicabo esse, quibusdam nulla voluptas.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem modi, facilis quas, accusamus illum ex quidem magni consectetur similique saepe cupiditate. Culpa, cum, expedita. Aut reprehenderit velit deserunt minus placeat.</p>
        <p>Voluptate aliquam autem soluta pariatur ducimus qui molestias doloremque officia alias sapiente corrupti recusandae possimus fuga laudantium, assumenda minus est blanditiis, ex voluptas ab ipsam natus. Quidem doloribus voluptate illum.</p>
        <p>Delectus inventore neque optio sequi deserunt. Quaerat nisi, autem alias quas quo veritatis dolore ullam, aliquid deserunt, aspernatur consequatur eligendi? Minus dolorem, illo accusantium dolorum magnam porro asperiores temporibus nesciunt.</p>
        <p>Accusantium culpa nam vero in quae eveniet ipsam dolorum quo nihil maiores. Esse aspernatur eos quibusdam, temporibus reiciendis reprehenderit omnis cumque aliquam tenetur et! Qui praesentium beatae reiciendis repellendus quos.</p>
        <p>Debitis ullam perspiciatis, ratione dolorem repellat odit incidunt placeat cumque enim aliquid culpa esse, sit fugit harum quisquam animi. Mollitia sequi est ad, expedita commodi dignissimos officiis, debitis quia fugiat!</p>
      </div>
    </div>
  </div>
</div>

Update 1

This is a very hacky solution, but basically I just made the position of the header element fixed, made its z-index higher and gave it a background. I also had to change the padding of the .modal-body element. Give me a bit more time to fiddle with this and I'll post another update.

Original

I believe this does what you want. By default (unless I'm totally mistaken and if I am someone please let me know) the height for elements is auto, so there's no real need to declare it. I tested it a few different times by adding in paragraphs to allow the scroll and taking it out to make sure that the div shrank.

.fade {
  position: fixed;
  background: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.modal {
  position: absolute;
  background: #fff;
  border-radius: 5px;
  width: 400px;
  max-height: calc(100% - 100px);
  /* Works but window will be always max height */
  /*height: calc(100% - 100px);*/
  top: 50px;
  left: calc(50% - 200px);
  overflow-y: auto;
}
.modal-contents {
  position: relative;
  width: 100%;
  height: 100%;
}
.modal-header {
  position:fixed;
  height: 25px;
  padding: 0 10px;
  line-height: 25px;
  z-index:100;
  background-color:white;
}
.modal-body {
  padding-top:25px;
  height: calc(100% - 25px);
  overflow: auto;
}

<div class="fade">
  <div class="modal">
    <div class="modal-contents">
      <div class="modal-header">
        Header
      </div>
      <div class="modal-body">
        <!-- Example content -->
        Test
        <br/>123
        <br/>Test
        <br/>123
        <br/>Test
        <br/>123
        <br/>Test
        <br/>123
        <br/>Test
        <br/>123
        <br/>Test
        <br/>123
        <br/>Test
        <br/>123
        <br/>Test
        <br/>123
        <br/>Test
        <br/>123
        <br/>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, ipsa.</p>
      </div>
    </div>
  </div>
</div>

Answer 2

I erased the height from .modal-contents (making it auto that way and allowing it to get higher) and added overflow-y: auto; to modal. If you erase some of the sample content infrom the HTML, you'l see the height shrinking (which I think is what you also wanted - if not, add a min-height setting).

.fade {
  position: fixed; 
  background: rgba(0,0,0,0.4); 
  width: 100%; 
  height: 100%; 
  top: 0; 
  left: 0;
}

.modal {
  position: absolute;
  background: #fff; 
  border-radius: 5px;
  width: 400px;
  max-height: calc(100% - 100px);
  height: auto;
  top: 50px; 
  left: calc(50% - 200px);
  overflow-y: auto;
}

.modal-contents {
  position: relative; 
  width: 100%; 
}

.modal-header {
  height: 25px;
  padding: 0 10px;
  line-height: 25px;
}

.modal-body {
  height: calc(100% - 25px);
  overflow: auto;
}

Here it is in a fiddle: https://jsfiddle.net/en5fb3mf/

ADDITION/EDIT after seeing comments to other answers: Here is a version with a fixed header: https://jsfiddle.net/en5fb3mf/2/

Answer 3

Changing the overflow property on .modal seemed to do the trick.

Switch overflow: hidden; to overflow: scroll