Flexbox布局中动态高度Div无法保持1/1宽高比的问题

问题核心 #

你需要实现左侧方块高度跟随右侧文本容器的高度变化，同时保持宽高1:1的正方形，但原代码中设置aspect-ratio:1/1的方块无法显示——因为该属性需要至少一个维度（宽或高）有确定值才能生效，默认Flex布局下左侧元素没有明确尺寸，导致无法渲染。

修正方案 #

方案一：使用CSS Grid（推荐，更直观）

Grid布局天生适配这种跨维度依赖的场景，直接让左侧元素高度匹配右侧，再通过aspect-ratio维持正方形：

.container {
  background: orange;
  display: grid;
  grid-template-columns: auto 1fr; /* 左侧宽度自适应，右侧占满剩余空间 */
}

.profile_pic {
  height: 100%; /* 高度跟随容器（由右侧文本撑开） */
  aspect-ratio: 1/1; /* 宽高1:1 */
  background: blue;
  width: auto; /* 宽度由高度自动计算 */
}

.text_container {
  display: flex;
  flex-direction: column;
}

方案二：继续使用Flexbox

如果坚持用Flex，需要调整对齐规则并强制左侧元素高度撑满容器，同时避免被压缩：

.container {
  background: orange;
  display: flex;
  align-items: stretch; /* 让子元素高度撑满容器 */
}

.profile_pic {
  height: 100%; /* 高度等于容器高度（由右侧文本决定） */
  aspect-ratio: 1/1;
  background: blue;
  width: auto;
  flex-shrink: 0; /* 防止方块被压缩变形 */
}

.text_container {
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* 文本容器占满剩余宽度 */
}

额外修正 #

注意你原HTML中的标签错误：<h3>Password: 123</h2> 应该改为 <h3>Password: 123</h3>，错误的闭合标签可能导致布局异常。

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