如何用CSS使答题div高度一致（适配内容最多的容器）

嘿，我刚好碰到过一模一样的问题！你说用flex没生效，大概率是容器和子元素的结构没搭对——咱们不用急着上JS，用CSS就能轻松搞定选项高度统一的问题，给你两个靠谱的方案：

方案1：修复Flex布局（让它真正生效） #

先排查下你之前flex没起作用的常见原因：

• 选项div不是flex容器的直接子元素（中间嵌套了其他标签），导致拉伸效果没传递到目标div上；
• 选项div设置了固定height或min-height，覆盖了flex的拉伸行为；
• flex容器的align-items被设成了flex-start/center这类非默认值，取消了自动拉伸。

如果你的选项是横向排列，只要给容器加一行代码就行：

.options-container {
  display: flex;
  /* align-items: stretch; 这是默认值，不用额外写 */
}

这样所有选项div会自动拉伸到和最高的那个一样高。

如果选项是纵向排列，需要给子元素加flex: 1让它们填充容器高度（容器高度由最高选项撑开）：

.options-container {
  display: flex;
  flex-direction: column;
}
.option {
  flex: 1; /* 让每个选项平分容器高度 */
  /* 可选：如果内容溢出，加 overflow: auto; 避免撑破容器 */
}

方案2：用Grid布局（更简洁可靠） #

Grid天生就是为这种维度对齐的场景设计的，不管横向还是纵向排列，代码都更简洁：

如果是纵向排列（每个选项占一行，高度统一）：

.options-container {
  display: grid;
  grid-template-rows: repeat(auto-fit, 1fr); /* 自动生成行数，每行高度相等 */
  gap: 12px; /* 可选，设置选项之间的间距 */
}

如果是横向排列（每个选项占一列，高度统一）：

.options-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* 自适应列宽，可调整minmax的数值 */
  gap: 12px;
}

Grid的兼容性现在已经覆盖绝大多数现代浏览器，而且不需要纠结层级问题，只要容器直接包裹选项div，就能轻松实现高度统一。

先试试上面的方案，应该就能解决问题啦，完全不用写JS~

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