Why does overflow:auto not work as expected?

October 7, 2023

I have an HTML where I can’t figure out how to tell the .modal-message div not to exceed its parent div .modal-container. The parent has a dynamic height set (80%) and I somehow have to make its child to fit into that. I don’t want to add overflow: auto to the parent, I only want the child being scrollable.

.content {
    width: 600px;
    margin: 0 auto;
    background: #ddd;
}

.wrapper {
    padding: 1rem;
    position: relative;
}

.modal {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    align-items: center;
    justify-content: center;
}

.modal-container {
    max-width: 80%;
    max-height: 80%;
    /* overflow: auto; */ /* this I don't want to do */
}

.modal-header {
    padding: .1rem 1rem;
    background: #ccc;
}

.modal-message {
    /* max-height: 150px; */ /* this I can't do */
    padding: 1rem;
    background: #f1f1f1;
    overflow: auto;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
  <div class="content">
    <div class="wrapper">

      <div class="section">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque perferendis aut dolores quia soluta sequi eos, ad reiciendis ex modi voluptate dolore officiis sint est laboriosam aperiam exercitationem ipsam consequuntur.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque perferendis aut dolores quia soluta sequi eos, ad reiciendis ex modi voluptate dolore officiis sint est laboriosam aperiam exercitationem ipsam consequuntur.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque perferendis aut dolores quia soluta sequi eos, ad reiciendis ex modi voluptate dolore officiis sint est laboriosam aperiam exercitationem ipsam consequuntur.</p>
      </div>

      <div class="modal">
        <div class="modal-container">
          <div class="modal-header">
            <h4>Very important headline</h4>
          </div>
          <div class="modal-message">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque perferendis aut dolores quia soluta sequi eos, ad reiciendis ex modi voluptate dolore officiis sint est laboriosam aperiam exercitationem ipsam consequuntur.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque perferendis aut dolores quia soluta sequi eos, ad reiciendis ex modi voluptate dolore officiis sint est laboriosam aperiam exercitationem ipsam consequuntur.</p>          
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque perferendis aut dolores quia soluta sequi eos, ad reiciendis ex modi voluptate dolore officiis sint est laboriosam aperiam exercitationem ipsam consequuntur.</p>          
          </div>
        </div>
      </div>

    </div>
  </div>

</body>
</html>

Has anybody any clue how to achieve this?

>Solution :

Make the modal container a flexbox container

.content {
  width: 600px;
  margin: 0 auto;
  background: #ddd;
}

.wrapper {
  padding: 1rem;
  position: relative;
}

.modal {
  display: flex;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
}

.modal-container {
  max-width: 80%;
  max-height: 80%;
  display: flex; /* added */
  flex-direction: column; /* added */
}

.modal-header {
  padding: .1rem 1rem;
  background: #ccc;
}

.modal-message {
  padding: 1rem;
  background: #f1f1f1;
  overflow: auto;
}

<div class="content">
    <div class="wrapper">

      <div class="section">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque perferendis aut dolores quia soluta sequi eos, ad reiciendis ex modi voluptate dolore officiis sint est laboriosam aperiam exercitationem ipsam consequuntur.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque perferendis aut dolores quia soluta sequi eos, ad reiciendis ex modi voluptate dolore officiis sint est laboriosam aperiam exercitationem ipsam consequuntur.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque perferendis aut dolores quia soluta sequi eos, ad reiciendis ex modi voluptate dolore officiis sint est laboriosam aperiam exercitationem ipsam consequuntur.</p>
      </div>

      <div class="modal">
        <div class="modal-container">
          <div class="modal-header">
            <h4>Very important headline</h4>
          </div>
          <div class="modal-message">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque perferendis aut dolores quia soluta sequi eos, ad reiciendis ex modi voluptate dolore officiis sint est laboriosam aperiam exercitationem ipsam consequuntur.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque perferendis aut dolores quia soluta sequi eos, ad reiciendis ex modi voluptate dolore officiis sint est laboriosam aperiam exercitationem ipsam consequuntur.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque perferendis aut dolores quia soluta sequi eos, ad reiciendis ex modi voluptate dolore officiis sint est laboriosam aperiam exercitationem ipsam consequuntur.</p>
          </div>
        </div>
      </div>

    </div>
  </div>