React flex 容器中的 SVG 分隔线如何匹配输入框高度？

2026-11-04数据阿明

结论

将 SVG 分隔线的 height: auto 改为 height: 100%，并保留 align-self: stretch。SVG 是 flex 子项，设为 height: auto 时会根据自身尺寸计算高度，无法明确表示它应填满搜索框的可用高度。

.find-course-divider {
  display: block;
  width: 1px;
  height: 100%;
  flex: 0 0 1px;
  align-self: stretch;
}

.find-course-search-box 已设置 height: 50px、display: flex 和 align-items: stretch。搜索框有 4px 边框，因此内部可用高度为 42px。SVG 会填满内容区，不会覆盖边框。

align-items: stretch 会沿交叉轴拉伸 flex 子项。若要让输入框、下拉菜单和分隔线高度一致，可以明确设置输入框高度，并使用 box-sizing: border-box：

.find-course-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
  border: none;
}

如果浏览器默认样式或其他 CSS 规则影响了输入框高度，显式设置这些属性有助于保持高度一致。min-width: 0 还可以避免输入框内容挤压其他 flex 子项。

height: 100% 需要父容器有明确高度。当前搜索框设置了 height: 50px，所以可以使用这个值。如果之后容器高度改为由内容决定，可以依靠 align-items: stretch 拉伸 flex 项，并检查 SVG 的固有尺寸是否会影响结果。