Auto-height on description

by Sylvain Prat

HTML

<div class="fullscreen">
  <div class="content">
    <div class="image-area">
      <img src="http://img0.mxstatic.com/wallpapers/f424924e12f269c3dfd65e5be8cda9ba_large.jpeg">
    </div>
    <div class="description-area">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue et ante id sodales. Etiam mollis neque nisi, id maximus tellus condimentum a. Duis condimentum erat quis ligula maximus mollis. Morbi congue, nunc sit amet suscipit consectetur,
        enim tortor lobortis felis, eget aliquam sem tortor quis augue. Duis ac viverra urna, non scelerisque leo. Nam vel dolor risus. Duis feugiat vulputate neque id fermentum. Aenean rhoncus libero ipsum, commodo vulputate dui commodo a. Maecenas sit
        amet pulvinar orci. Proin dapibus dui vel justo vulputate, a aliquam dui rhoncus. Phasellus lacinia venenatis leo, vel facilisis lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer erat ipsum, pharetra
        ac tempor et, viverra et nibh.</p>
    </div>
  </div>
</div>

CSS

html,
body {
  height: 100%;
}

img {
  /* keep aspect-ratio */
  max-width: 100%;
  max-height: 100%;
}

p {
  margin: 0;
}

.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}


/* adapt from here */

.content {
  display: table;
  width: 100%;
  /*table-layout: fixed;*/
}

.image-area {
  display: table-row;
  height: 1px;
}

.description-area {
  display: table-row;
  height: auto;
}