Flexbox垂直布局子项等高响应式布局问题求助

错误原因 #

• 未给.article容器设置合适的高度基准（比如min-height或基于父容器的高度），导致flex子项无法获取统一的高度参考
• 未给flex子项配置flex: 1属性，无法让子项自动填充容器的可用空间，进而出现高度不一致的问题
• .article-info未处理内容溢出逻辑，当文本内容过多时直接超出容器边界
• 媒体查询中可能覆盖了原有flex布局的关键属性，导致布局逻辑冲突

纯HTML/CSS解决方案 #

HTML结构 #

<div class="article">
  <div class="article-preview">
    <img src="your-image.jpg" alt="文章预览图">
  </div>
  <div class="article-info">
    <h3>文章标题</h3>
    <p>这里是文章的详细内容，可包含多段文本，确保在小屏幕下不会溢出容器...</p>
  </div>
</div>

CSS代码 #

/* 基础布局：大屏幕样式 */
.article {
  display: flex;
  gap: 1rem;
  min-height: 400px; /* 设置容器高度基准 */
  border: 1px solid #eee;
}

.article-preview, .article-info {
  flex: 1; /* 大屏幕下平分容器空间 */
  overflow: hidden;
}

.article-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片自适应容器，避免变形 */
}

.article-info {
  padding: 1rem;
  display: flex;
  flex-direction: column;
}

.article-info p {
  flex: 1;
  overflow-y: auto; /* 内容过多时显示垂直滚动条 */
}

/* 响应式媒体查询：最大宽度763px时的布局 */
@media (max-width: 763px) {
  .article {
    flex-direction: column;
    height: auto; /* 小屏幕下容器高度随内容自适应 */
  }

  .article-preview, .article-info {
    flex: 1;
    min-height: 200px; /* 可选：设置子项最小高度，避免内容过少时布局过矮 */
  }
}

关键要点说明 #

• .article容器通过min-height设置高度基准，小屏幕下改为height: auto，兼顾固定高度参考与自适应需求
• flex子项添加flex: 1，确保column方向下自动平分容器可用空间，实现等高效果
• .article-info内部用flex布局让文本区域占满剩余空间，配合overflow-y: auto处理内容溢出，避免超出容器
• 图片使用object-fit: cover，保证在容器内自适应显示且不拉伸变形

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