Can't Scroll up with dynamic absolute DIV

Question

I made a div with several divs inside, that are opened with different buttons.

The div is centered, with absolute position, in the middle of the page.

The problem that I have is, that when I open this different divs, and the main DIV starts to go up, it disappear from the body itself, and i cannot see it and neither scroll up.

There is a way to stick it to the middle, or just limit the top of the body?

html,
body {
  height: 100%;
}

* {
  margin: 0;
  padding: 0;
}

body {
  background: #ecf0f1;
}

.container {
  width: 600px;
  background: #e74c3c;
  overflow: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  padding-bottom: 20px;
  padding-right: 20px;
  padding-left: 20px;
  -webkit-box-shadow: 10px 10px 39px -6px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 10px 10px 39px -6px rgba(0, 0, 0, 0.75);
  box-shadow: 10px 10px 39px -6px rgba(0, 0, 0, 0.75);
}

Answer 1

我会使用相对于flexbox而不是绝对位置。对于浏览器支持，您可以访问caniuse。

假设您不会将任何内容放在.container之外，您可以 将body css更改为下面的代码。

如果没有，您可以将.container与另一个div包裹，其高度和宽度均为100％，并将代码应用于新的div

body {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center; /* To center align horizontally*/
  align-items: center; /* To center align vertically*/
}

并从position: absolute移除top: 50%，left: 50%，transform: translate(-50%, -50%)和.container。

Answer 2

因为您没有为容器指定高度，所以它将继续增长 - 最终从页面顶部开始。如果您希望它不超过最大高度，则需要在CSS中指定。

.container {
  width: 600px;
  max-height: 300px;
  background: #e74c3c;
  overflow: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  padding-bottom: 20px;
  padding-right: 20px;
  padding-left: 20px;
  -webkit-box-shadow: 10px 10px 39px -6px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 10px 10px 39px -6px rgba(0, 0, 0, 0.75);
  box-shadow: 10px 10px 39px -6px rgba(0, 0, 0, 0.75);
}