内容区域overflow设置异常：添加垂直滚动不压缩图片求助

核心问题是你没给内容区域设置固定可用高度，同时flex布局的justify-content:center会在空间不足时压缩子元素（包括图片）。按以下步骤修改即可：

关键修改点 #

1. 给父容器.window设置弹性布局，让头部和内容区自动分配垂直空间
2. 固定头部高度，避免被压缩
3. 让内容区占据剩余高度并开启垂直滚动，同时移除会导致子元素压缩的justify-content:center

修改后的完整CSS代码 #

.window {
  position: absolute;
  z-index: 9;
  background-color: rgba(20, 19, 43, 1);
  text-align: center;
  width: 500px;
  height: 400px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  /* 新增：设置弹性布局，垂直排列子元素 */
  display: flex;
  flex-direction: column;
}

.close-button {
  background: rgba(0, 0, 0, 0.0);
  border: 0px;
  float: right;
  margin-right: -4px;
  margin-top: -1px;
}

.windowheader {
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: rgba(37, 35, 58, 1);
  color: #fff;
  height: 10px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  /* 新增：禁止头部被压缩 */
  flex-shrink: 0;
}

.window1 img {
  margin-top: 10px;
  margin-bottom: 0;
  width: 70%;
  align-self: center;
}

.window1.content {
  display: flex;
  flex-direction: column;
  /* 移除：justify-content:center 避免压缩子元素 */
  align-items: flex-start;
  text-align: left;
  overflow-y: auto;
  /* 新增：占据父容器剩余的全部垂直空间 */
  flex: 1;
  /* 可选：添加内边距避免内容贴边 */
  padding: 0 10px;
}

.content h1,
p {
  font-family: 'SF Pro Display';
  margin-left: 72px;
  margin-top: 2px;
  text-align: left;
  color: rgb(171, 168, 168);
}

.content h1 {
  font-size: 26px;
  font-weight: 600;
}

效果说明 #

• .window改为flex布局后，windowheader固定高度，.content自动填满剩余的垂直空间（400px减去头部的实际高度）
• 移除justify-content:center后，内容从顶部开始排列，不会压缩图片
• 当内容高度超过.content的可用高度时，自动出现垂直滚动条，完全保留原有布局样式

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