CODEWITHSUNDEEP
cssresizeoverflowviewport
Vaughn Ouano
Vaughn Ouano

Reputation: 1

Resizing height of content when a screen height changes

I have this problem when I change the height of the screen, the parent container does changes according to to screen height, but its children components remains the same, thus resulting into overflowing of the children components outside the parent container.

/* Parent container */
.container {
  position: relative;
  height: 85vh;
  max-height: 700px;
  width: 500px;
  margin: 0 auto;
  background-color: #ffffff;
  border-radius: 10px;
}

/* Custom shadow for parent container */
.container::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 8px;
  height: inherit; /* Problem: using inherit here */
  max-height: 700px;
  width: inherit;
  background-color: rgba(187, 187, 187, 0.125);
  border-radius: 5px;
  z-index: -1;
}

/* Header inside the container */
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px 0 0;
  font-size: 24px;
  font-weight: bold;
}

/* Lists area */
.lists-container {
  margin: 50px;
  height: 50vh;
  max-height: 500px;
  background-color: red;
}

/* User input area */
.userInput-container {
  width: 100%;
  background-color: green;
  display: flex;
  justify-content: center;
}
<div class="container">
  <div class="header">TO-DO LIST</div>
  <div class="lists-container">Lists go here</div>
  <div class="userInput-container">Input area</div>
</div>

I have tried implementing max-height to the lists-container, but it does not work. I am not sure why, when that is what I did to the parent container, which worked when resized.

Upvotes: 0

Views: 40

Answers (0)

Related Questions