防止 flexbox div 在 window 调整大小时进入 header 兄弟

Question

我无法阻止 flexbox div 进入其兄弟 (header)。我有以下 HTML/CSS 结构：

HTML:

<div class="application">
    <header class="application-header">HEADER</header>
    <div class="application-content">
        <div class="content">
            <div class="content-header">TITLE</div>
        </div>
    </div>
</div>

CSS:

.application {
    text-align: center;
    flex-direction: column;
    min-height: 100vh;
    max-height: 100vh;
    height: 100vh;
    display: flex;    
}

.application-header {
    height: 44px;
    padding: 0.5rem;
    text-align: center;
}

.application-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1;
    overflow-y: auto;
    max-height: calc(100vh - 44px);
    text-align: center;
}

.content {
    flex-direction: column;
    max-width: 1200px;
    min-width: 800px;
    width: 80%;
    min-height: 555px;
    height: calc(100% - 40px);
    display: flex;
    top: 0px;
    position: relative;
    text-align: center;
}

.content-header {
    justify-content: center;
    font-size: 60px;
    flex-direction: row;
    width: 100%;
    min-height: 100px;
    display: flex;
}

图像：

这是在调整大小之前：

这是调整大小后的结果。注意后面的内容是header:

我正在寻找的是在调整大小后，内容像第一张图片一样停留在顶部，溢出是 可滚动。 而且，我希望它也是内容和 header 之间的空白。有谁知道我怎样才能让 div 留在原处而不是躲在 header 后面？

如果您需要任何其他信息或图像，请告诉我。我不是很精通 html/css 所以它可能比看起来更简单。

PS.: 我确实需要 .content 上的 min-height，或者至少是一种限制它可以缩小多少的方法。

编辑#1：

.application {
  text-align: center;
  flex-direction: column;
  min-height: 100vh;
  max-height: 100vh;
  height: 100vh;
  display: flex;
}

.application-header {
  height: 44px;
  padding: 0.5rem;
  text-align: center;
}

.application-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1;
  overflow-y: auto;
  max-height: calc(100vh - 44px);
  text-align: center;
}

.content {
  flex-direction: column;
  max-width: 1200px;
  min-width: 800px;
  width: 80%;
  min-height: 555px;
  height: calc(100% - 40px);
  display: flex;
  top: 0px;
  position: relative;
  text-align: center;
}

.content-header {
  justify-content: center;
  font-size: 60px;
  flex-direction: row;
  width: 100%;
  min-height: 100px;
  display: flex;
}

<html class="">

<head>

</head>

<body class="" style="padding-top: 0px; margin-top: 0px;">
  <div class="application">
    <header class="application-header" style="background-color: blue;">HEADER</header>
    <div class="application-content" style="background-color: red;">
      <div class="content" style="background-color: greenyellow; color: black;">
        <div class="content-header">TITLE</div>
      </div>
    </div>
  </div>
</body>

</html>

Answer 1

我能够保持结构完整的 flexbox 并在 .content 上保持 min-height 滚动溢出。我已经将所有 vh 更改为 %，并为 body 添加了 100% 的高度和 html，就像@カミロン建议的那样。我还更改了 div 有 overflow 和 min-height。但最重要的是，我在 .application-content.

上添加了一个包装器

html,
body {
  height: 100%;
}

.application {
  flex-direction: column;
  min-height: 100%;
  max-height: 100%;
  height: 100%;
  display: flex;
  text-align: center;
}

.application-header {
  text-align: center;
  min-height: 44px;
}

.application-wrapper {
  flex-direction: column;
  height: calc(100% - 44px);
  display: flex;
  margin: auto;
  text-align: center;
}

.application-content {
  flex: 1 1;
  height: calc(100% - 44px);
  margin: 20px;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.content {
  overflow-y: auto;
  flex-direction: column;
  max-width: 1200px;
  min-width: 800px;
  width: 80%;
  height: 100%;
  display: flex;
}

.content-header {
  flex-direction: row;
  min-height: 100px;
  width: 100%;
  display: flex;
}

.content-body {
  flex-direction: row;
  min-height: 455px;
  display: flex;
  flex: 1 1;
}

<div class="application">
  <header class="application-header">HEADER</header>
  <div class="application-wrapper">
    <div class="application-content">
      <div class="content">
        <div class="content-header">TITLE</div>
        <div class="content-body"></div>
      </div>
    </div>
  </div>
</div>

结果：

调整大小之前

调整大小后：

防止 flexbox div 在 window 调整大小时进入 header 兄弟

Prevent flexbox div from going under header sibling when window is resized

html

css

overflow

flexbox