CODEWITHSUNDEEP
htmlcssflexbox
takeradi
takeradi

Reputation: 3861

max-height not working on modal dialog in flex container with position:fixed

Why is the max-height of the modal-dialog not being set?

  1. I want the modal-dialog to be centered and take a max-height of 90vh.
  2. I also want the content only the modal-body to scroll if it overflows.

Could you please let me know what I may be doing wrong over here?

Please Note: I do not want the complete modal-dialog to scroll. Just the modal-body. The modal-dialog should have a max-height of 90vh. After which it shouldn't expand in height

.modal{
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px;
  background: gray;
}

.modal-dialog{
  position: relative;
  z-index: 1000;
  width: 500px;
  max-width: 100%;
  max-height: 90vh;
}

.modal-header{
  background: cyan;
  padding: 24px 24px;
}

.modal-footer{
  background: cyan;
  display: flex;
  justify-content: flex-end;
  padding: 24px 24px;
}

.modal-body{
  background: red;
  overflow-y: auto;
  padding: 0 24px;
}
<div class="modal">
  <div class="modal-dialog">
    <div class="modal-header">Header</div>
    <div class="modal-body">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
    </div>
    <div class="modal-footer">
      <button type="button">Hello</button>
    </div>
  </div>
</div>

Upvotes: 1

Views: 62

Answers (5)

Michael Benjamin
Michael Benjamin

Reputation: 371679

The answer by @Punit appears to work perfectly (+1).

Here's an alternative solution should the need arise:

html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
}
.modal {
  height: 100%;
  z-index: 1000;
  display: flex;
  background-color: gray;
}
.modal-dialog {
  z-index: 1000;
  margin: auto;
  width: 500px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.modal-header {
  background: cyan;
  padding: 24px 24px;
}
.modal-footer {
  text-align: right;
  background: cyan;
  padding: 24px 24px;
}
.modal-body {
  background: red;
  overflow-y: auto;
  padding: 0 24px;
}
<div class="modal">
  <div class="modal-dialog">
    <div class="modal-header">Header</div>
    <div class="modal-body">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error! Lorem ipsum dolor sit amet, consectetur
      adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet
      facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum
      delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore
      provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur
      neque rerum assumenda officiis sunt quos vero! Error! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis
      sunt quos vero! Error! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error! Lorem
      ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error! Lorem ipsum dolor sit amet, consectetur
      adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet
      facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum
      delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore
      provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur
      neque rerum assumenda officiis sunt quos vero! Error!
    </div>
    <div class="modal-footer">
      <button type="button">Hello</button>
    </div>
  </div>
</div>

jsFiddle

Upvotes: 1

Punit
Punit

Reputation: 1976

You need to set a height for overflow to work properly. This means setting a height to the element you want to make scrollable, not its parent.

So for this, you could set a max-height to .modal-body. In my snippet I'm using calc to take away all the heights and vertical margin/padding that aren't part of the modal-body's height, from 100vh.

.modal {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: gainsboro;
}

.modal-dialog {
  position: relative;
  width: auto;
  max-width: 500px;
  margin: 16px;
}

.modal-header {
  background: cyan;
  padding: 16px;
  max-height: 50px;
}

.modal-footer {
  background: cyan;
  display: flex;
  justify-content: flex-end;
  padding: 16px;
  max-height: 50px;
}

.modal-body {
  background: pink;
  overflow-y: auto;
  padding: 16px;
  overflow-y: auto;
  max-height: calc(100vh - 164px);
}
<div class="modal">
  <div class="modal-dialog">
    <div class="modal-header">Header</div>
    <div class="modal-body">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, amet facere vero, libero voluptatum delectus consectetur dolore provident. Illo quod in aspernatur neque rerum assumenda officiis sunt quos vero! Error!
    </div>
    <div class="modal-footer">
      <button type="button">Hello</button>
    </div>
  </div>
</div>

Upvotes: 3

A.K.
A.K.

Reputation: 2322

.modal-body{
  overflow-y: auto !important;
  max-height: 90vh !important;
}

try this

Upvotes: 0

Fala
Fala

Reputation: 566

I was able to fix the second one, and the first one should be working, but i didn't test it. the overflow-y can be auto or scroll.

Here's the new CSS:

    .html {background: gray;}
.modal{
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px;
  background: gray;
}

.modal-dialog{overflow-y: auto;
  position: relative;
  z-index: 1000;
  width: 500px;
  max-width: 100%;
  max-height: 90vh !important;
}

.modal-header{
  background: cyan;
  padding: 24px 24px;
}

.modal-footer{
  background: cyan;
  display: flex;
  justify-content: flex-end;
  padding: 24px 24px;
}

.modal-body{
  background: red;
  overflow-y: auto;
  padding: 0 24px;
}

Upvotes: 0

Jan Franta
Jan Franta

Reputation: 1721

You forgot to set the modal box to overflow: auto;

Upvotes: 0

Related Questions