如何缩小Flexbox布局中弹性项周边空白并优化顶部灰色空间？

我需要缩小Flexbox布局中弹性项周围的空白区域，当前为父flex容器嵌套子flex容器的结构。尝试在.contain、.modal、.parent-box三个CSS类中设置margin，但未达到预期效果，仅需优化顶部灰色空间并实现响应式。

我的HTML代码 #

<div class="parent-box">
    
    <div class="contain">
        <div class="modal">
            <h2>Plans For The Site</h2>
            <p><span class="date">~12-03-24 00:57~</span><br><span class="body">so, in order, i want to get this little blog thing working and looking the way i want, create the gifs and pictures for the background and buttons, create a font and add it, add some little music effects to everything, add some content to the different pages, add a little gir cursor, and then i think ill put the link up on my socials. once i get to the point of putting it up on my socials, ill subscirbe and get a domain name that i like... before that im just gonna keep working on the free subscription unless i run out of space. eta with the way im working looks to be about a week- 3 weeks, esp with the clothing im working on.</span>
        </div>
    </div>
    <div class="contain">
        <div class="modal">
            <h2>Plans For The Site</h2>
            <p><span class="date">~11-03-24 01:38~</span><br><span class="body">Just got the website front page done superficially, need to create the gifs and pictures and background, and need to figure out how to format this blog better than it is atm... make take a day or so... going to bed right now though</span></p>
        </div>
    </div>

</div>

我的CSS代码 #

.contain {
  width: 100vw;
  height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;
}

.modal {
  width: 50vw;
  height: 50%;
  margin:30px;
  padding: 1rem;
  background-color: aqua;
  border: 1px solid black;
  border-top: 15px solid black;
  color: black;
  overflow: scroll;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.parent-box {
        display: flex;
        width: 70%;
        height: 50vh;
        margin-left:auto;
        margin-right:auto;
        margin-bottom:10px;
        margin-top:10px;
        overflow: scroll;
        overflow-x: hidden;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        font-size: 30px;
        text-align: center;
        background-color: #7d7d7d;
        color: #000000;
        font-weight: bold;
}

问题根源与修复方案 #

核心问题 #

1. .contain设置了height:100vh，每个嵌套容器直接占满整个视口高度，导致.parent-box内部出现大量冗余空白；width:100vw超出父容器宽度限制，引发不必要滚动。
2. .parent-box用了justify-content: space-between，会把内部元素往上下两端分散，加剧顶部空白问题。
3. .modal的固定高度和过大宽度在小屏幕显示异常，缺乏响应式适配。

修改后的CSS代码 #

/* 修正嵌套容器尺寸，贴合内容 */
.contain {
  width: 100%; /* 继承父容器宽度 */
  min-height: auto; /* 去掉100vh，高度由内容决定 */
  display: flex;
  justify-content: center;
  align-items: flex-start; /* 顶部对齐，避免垂直居中带来空白 */
  margin: 10px 0; /* 保留少量间距，避免元素挤在一起 */
}

/* 优化模态框尺寸与响应式 */
.modal {
  width: 90%; /* 百分比适配不同屏幕 */
  max-width: 800px; /* 限制最大宽度，避免大屏过宽 */
  height: auto; /* 高度随内容自适应 */
  max-height: 400px; /* 限制最大高度，内容过多时滚动 */
  margin: 10px; /* 缩小外边距 */
  padding: 1rem;
  background-color: aqua;
  border: 1px solid black;
  border-top: 15px solid black;
  color: black;
  overflow-y: auto; /* 仅垂直滚动 */
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  text-align: left;
}

/* 调整父容器布局，减少顶部空白 */
.parent-box {
  display: flex;
  width: 70%;
  height: 80vh; /* 适当调高高度，显示更多内容 */
  margin: 10px auto; /* 简化margin写法 */
  overflow-y: auto;
  overflow-x: hidden;
  justify-content: flex-start; /* 顶部开始排列，消除分散空间 */
  align-items: center;
  flex-direction: column;
  font-size: clamp(18px, 2vw, 30px); /* clamp实现响应式字体 */
  text-align: center;
  background-color: #7d7d7d;
  color: #000000;
  font-weight: bold;
  padding-top: 10px; /* 保留少量内边距，避免元素贴顶 */
}

/* 小屏幕适配 */
@media (max-width: 768px) {
  .parent-box {
    width: 95%; /* 小屏用接近全屏宽度 */
    height: 90vh;
  }
}

关键修改说明 #

• 把.contain的100vw/100vh改成自适应尺寸，避免占满视口导致的空白；
• 将.parent-box的justify-content从space-between改为flex-start，让元素从顶部开始排列，消除顶部冗余空间；
• 给.modal设置max-width和height:auto，配合响应式字体，保证不同设备正常显示；
• 添加媒体查询，针对小屏幕调整父容器宽度，增强响应式效果。

内容的提问来源于stack exchange，提问作者ManOfC