How to make Popup fixed width and height with long content inside

Hello everyone…

I need a bit of help with CSS.

I have a Popup in the middle of the page and the content on it is so long that makes the Popup touches the bottom of the screen. I’d like to make the Popup fixed height and stay in the center of the screen, and scroll inside the popup.


Hi Fabian,
Please try this;

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

.popup {
  position: relative;
  max-width: 80%; /* Adjust the width of the popup as needed */
  max-height: 80vh; /* Adjust the height of the popup as needed */
  background-color: #fff;
  padding: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;

.popup-content {
  overflow-y: auto;
  flex: 1;

Thank you @jona for your answer…

I had this before and it didn’t work.

div#popup{width: 600px !important;
height: 700px !important;
position: fixed !important;
top: 40px !important; left: 0  }

Your code didn’t work too.

Thanks anyway

This topic was automatically closed after 70 days. New replies are no longer allowed.