使用Flex布局时如何让下划线（边框）填充剩余水平空间

解决方案 #

你只需要调整CSS样式即可，不需要修改现有HTML结构，全程保留Flex布局：

修改点说明

1. 给每个表单项的父容器开启flex布局，固定宽度实现两列排布，同时让标签和下划线底部对齐
2. 给下划线容器设置flex:1，自动填充当前行剩余可用空间

完整修改后的CSS代码

body em {
  font-family: 'Brygada 1918';
  font-size: 90%;
}

#border_box {
  border: 6px double black;
  padding: 12pt;
}

#id_card {
  justify-content: center;
  width: 540px;
  background: url(https://bladesnpc.com/bitd-images/paper_texture.png) rgba(244, 241, 230, 1);
  padding: 12pt;
  font-family: Courier;
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.4), inset -1px -1px 1px rgba(0, 0, 0, 0.6);
}

/* 新增样式：控制表单项两列布局 + 内部flex排布 */
.attributes > div {
  display: flex;
  width: 48%;
  align-items: flex-end;
  margin-bottom: 1em;
}

.formfill {
  /* 新增flex:1实现自动填充剩余宽度 */
  flex: 1;
  border-bottom: 1px solid black;
  /* 调整间距，和前面的标签分隔开 */
  margin-left: 4px;
}

.attributes {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.flexbreak {
  width: 100%;
}

调整后不管表单项内容长短，下划线都会自动填满当前行的剩余空间，完美模拟真实表单的打字机填写效果，同时完全保留你原有的Flex布局逻辑。

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