Flexbox not overflowing parent position: absolute

user_555222 0
Viewed 43

How to stop a flexbox (dialogbox/modal) to overflow the parent element which is position: absolute ?

Right now if you resize the window .modal will overflow the parent #modal and the window. I want to add overflow to the body element in the modal

https://jsfiddle.net/fdo8an4c/

<div id="modal">
  <div class="modal">
    <div>
      body<br>body<br>body<br>body<br>body<br>body<br>body<br>body<br>body<br>body
    </div>
    <div class="modal-actions">
      actions
    </div>
  </div>
</div>

#modal{
    position:absolute;
    z-index:1;
    top:0;
    left:0;
    bottom:0;
    right:0;
    display:flex;
    background:red;
}

.modal{
    margin:auto;
    padding:20px;
    width:200px;
    min-height:150px;
    display:flex;
    flex-flow:column wrap;
    justify-content:space-between;
    align-items:stretch;
    background:#fff;
}

.modal-actions{
    padding-top:10px;
    text-align:right;
  background:yellow;
}
css
1 Answers

You can do something like that:

  1. Remove min-height and add max-height: 100vh; on .modal.
  2. Add max-height: calc(100vh - 80px) (80px is the button + paddings + a little more space for the modal to breathe) and overflow: auto on the modal body (the first div I assume).
<div id="modal">
  <div class="modal">
    <div class="modal-body">
      body<br>body<br>body<br>body<br>body<br>body<br>body<br>body<br>body<br>body
    </div>
    <div class="modal-actions">
      actions
    </div>
  </div>
</div>

#modal{
    position:absolute;
    z-index:1;
    top:0;
    left:0;
    bottom:0;
    right:0;
    display:flex;
    background:red;
}

.modal{
    margin:auto;
    padding:20px;
    width:200px;
    display:flex;
    flex-flow:column wrap;
    justify-content:space-between;
    align-items:stretch;
    background:#fff;
    max-height: 100vh;
}

.modal-body {
    max-height: calc(100vh - 80px);
    overflow: auto;
}

.modal-actions{
    padding-top:10px;
    text-align:right;
  background:yellow;
}
user_100335840
Related