<div class="container">
  <div class="element element-1">
    My height can not exceed 200px, even if my content needs more height, it will overflow.
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, deserunt, minima, praesentium, rerum voluptas incidunt ipsam animi expedita pariatur numquam ipsum qui sapiente obcaecati eos tenetur atque officiis iure ab.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, magni, recusandae, sint iusto temporibus reiciendis odio corporis magnam vel autem libero earum asperiores rerum ullam ex placeat nemo quibusdam ipsa.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, ea magni soluta quasi saepe eius totam repellendus inventore. Velit, odio laboriosam cumque ducimus minima doloremque aliquam soluta fuga ipsam repellendus.
    </p>
  </div>
  <div class="element element-2">
    I have a maximum height of 300px, and a <code>height</code> of 400px, so my height will not exceed 300px since <code>max-height</code> overrides <code>height</code>.
  </div>
</div>
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 40px auto;
  max-width: 700px;
}

.element {
  padding: 20px;
  background-color: lightblue;
  color: #111;
  margin-bottom: 150px;
}

.element-1 {
  max-height: 200px;
}

.element-2 {
  margin-top: 400px;
  max-height: 300px;
  height: 400px;
}