max-height is not working

Question

Good morning first. I’m trying to limit the height of my div classy contacts inside my div classy contact-page, however the height of contacts exceeds the contact-page, even with the max-height.

The idea is a framework of contacts that respects the parent element, with a vertical scrolling

---

I could just insert a div around the contacts which will work the way I hope, but my goal is to understand why it happens(max-height does not work) and solve simply by css

---

.container {
  max-height: 300px;
  background: #dddddd;
}

.contact-page {
  display: flex;
  justify-content: space-around;
  max-height: 100%;
}

.contact-page div {
  max-width: 45%;
}

.contacts {
  max-height: 100%;
  overflow-y: scroll;
}

<div class="container">
  <div class="contact-page">
    <div class="address">
      <p>Responsável: José</p>
      <p>Cidade: Cataguases - MG</p>
      <p>Bairro: Bairro</p>
      <p>Endereço: Rua SP, 115</p>
      <p>CEP: 36773-582</p>
      <p>GMAP Plus Code: JAZV+Q7</p>
    </div>
    <div class="contacts">
      <div class="contact">
        <b>Contato local</b>
        <p>(32) 3421-1202</p>
      </div>
      <div class="contact">
        <b>Sr.(a) José</b>
        <p>Contato 1: (32) 99810-0006</p>
        <p>Contato 2: (32) 92000-8962</p>
        <p>Email: [email protected]</p>
      </div>
      <div class="contact">
        <b>Sr.(a) Geraldo Benjamin Davi da Cunha</b>
        <p>Contato 1: (62) 3888-2057</p>
        <p>Contato 2: (62) 99959-7885</p>
        <p>Email: [email protected]</p>
      </div>
      <div class="contact">
        <b>Sr.(a) Kauê Filipe Levi Baptista</b>
        <p>Contato 1: (61) 3690-1697</p>
        <p>Contato 2: (61) 99945-5650</p>
        <p>Email: [email protected]</p>
      </div>
      <div class="contact">
        <b>Sr.(a) Danilo Manuel Martins</b>
        <p>Contato 1: (32) 3421-8588</p>
        <p>Contato 2: (32) 98986-7429</p>
        <p>Email: [email protected]</p>
      </div>
    </div>
  </div>
</div>

Answer 1

Your problem is that in the "father of all" class that is the div.container you put max-height, and in fact it should be a fixed value only height: 300px same. For in direct daughter div div.contact-page you used max-height: 100%, but to get the 100% of the father he needs to have a fixed value

.container {
  height: 300px;
  background: #dddddd;
}

.contact-page {
  display: flex;
  justify-content: space-around;
  max-height: 100%;
}

.contact-page div {
  max-width: 45%;
}

.contacts {
  max-height: 100%;
  overflow-y: scroll;
}

  

<div class="container">
  <div class="contact-page">
    <div class="address">
      <p>Responsável: José</p>
      <p>Cidade: Cataguases - MG</p>
      <p>Bairro: Bairro</p>
      <p>Endereço: Rua SP, 115</p>
      <p>CEP: 36773-582</p>
      <p>GMAP Plus Code: JAZV+Q7</p>
    </div>
    <div class="contacts">
      <div class="contact">
        <b>Contato local</b>
        <p>(32) 3421-1202</p>
      </div>
      <div class="contact">
        <b>Sr.(a) José</b>
        <p>Contato 1: (32) 99810-0006</p>
        <p>Contato 2: (32) 92000-8962</p>
        <p>Email: [email protected]</p>
      </div>
      <div class="contact">
        <b>Sr.(a) Geraldo Benjamin Davi da Cunha</b>
        <p>Contato 1: (62) 3888-2057</p>
        <p>Contato 2: (62) 99959-7885</p>
        <p>Email: [email protected]</p>
      </div>
      <div class="contact">
        <b>Sr.(a) Kauê Filipe Levi Baptista</b>
        <p>Contato 1: (61) 3690-1697</p>
        <p>Contato 2: (61) 99945-5650</p>
        <p>Email: [email protected]</p>
      </div>
      <div class="contact">
        <b>Sr.(a) Danilo Manuel Martins</b>
        <p>Contato 1: (32) 3421-8588</p>
        <p>Contato 2: (32) 98986-7429</p>
        <p>Email: [email protected]</p>
      </div>
    </div>
  </div>
</div>