如何让响应式Flexbox内元素不溢出且维持正方形容器？

核心思路 #

既要维持.info-container的正方形布局，又要让内部内容适配容器尺寸不溢出，关键在于固定容器比例+控制内容溢出行为。

具体实现代码 #

基础样式（桌面+移动端通用）

.homemain-links {
  display: flex;
  gap: 12px; /* 可选：链接之间的间距 */
}

.info-container {
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 6px; /* 加内边距避免内容贴容器边缘 */
  overflow: hidden; /* 核心：隐藏超出容器的内容 */
}

/* 如果容器内有图片，确保图片适配 */
.info-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* 保持图片比例，不拉伸变形 */
}

移动端媒体查询（≤576px）

@media (max-width: 576px) {
  .homemain-links {
    flex-direction: column;
    align-items: center; /* 可选：让链接居中排列 */
  }

  /* 方案1：保持固定100px正方形 */
  .info-container {
    width: 100px;
    height: 100px;
    /* 文本内容处理：多行省略 */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 最多显示3行文本 */
    -webkit-box-orient: vertical;
    text-align: center; /* 可选：文本居中更美观 */
  }

  /* 方案2：自适应移动端宽度的正方形（更推荐） */
  /* .info-container {
    width: 80%;  占父容器80%宽度
    aspect-ratio: 1 / 1;  强制1:1比例，自动生成对应高度
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
  } */
}

关键要点说明 #

1. aspect-ratio: 1/1：现代浏览器支持的属性，替代固定width+height，能轻松实现响应式正方形，容器宽度变化时高度自动匹配。
2. overflow: hidden：直接截断超出容器的内容，配合多行省略（-webkit-line-clamp）可以让长文本在容器内显示有限行数，避免溢出。
3. 内容适配：图片必须设置max-width/max-height和object-fit，防止图片撑破容器；文本通过弹性布局的换行或省略控制显示范围。

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