如何将ul的高度设置为flexbox内form元素的计算高度？

不需要使用JavaScript及ref，仅通过CSS布局即可实现ul高度跟随form的计算高度自适应，以下两种方案可选：

方案1：Grid布局（推荐） #

Grid布局天生支持等高列控制，适配逻辑更简单，代码如下：

/* 你的flex容器，替换原有flex相关配置即可 */
.container {
  display: grid;
  /* 按需调整两列宽度，示例为form固定300px，ul占剩余宽度 */
  grid-template-columns: 300px 1fr;
  /* 行高由内容高度更高的子元素决定，form内容自适应时行高等于form计算高度 */
  grid-auto-rows: auto;
  gap: 16px; /* 两个元素的间距可按需调整 */
}

/* ul元素样式 */
.target-ul {
  /* 移除之前手动设置的固定height */
  height: 100%;
  /* 内容超出时自动显示纵向滚动条，不会撑开容器高度 */
  overflow-y: auto;
}

方案2：原Flex容器兼容调整 #

如果不想修改原有flex容器结构，可通过调整对齐规则实现：

/* 原有flex容器 */
.container {
  display: flex;
  gap: 16px;
  /* 核心：子元素默认拉伸到容器高度 */
  align-items: stretch;
}

/* form元素样式 */
.target-form {
  /* form高度由自身内容决定，不会被拉伸 */
  height: fit-content;
  flex-shrink: 0;
}

/* ul元素样式 */
.target-ul {
  /* 移除之前手动设置的固定height */
  height: inherit;
  /* 内容超出时自动显示纵向滚动条 */
  overflow-y: auto;
}

通用注意事项 #

• 建议全局设置box-sizing: border-box，避免padding、border导致的高度计算偏差，示例代码如下：

* {
  box-sizing: border-box;
}

• 如果form存在margin属性，可根据需要给ul添加对应数值的margin，保证视觉高度对齐。

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