如何让div边框仅适配内容宽度 同时可按需占满可用空间

实现方案 #

你只需要调整.address的CSS规则即可满足需求，核心是使用fit-content宽度配合max-width限制：

.general-input>.address {
  border: 5px solid black;
  width: fit-content;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  /* 可选：控制内部输入框的间距 */
  gap: 4px;
}
/* 可选：让内部输入框也跟随容器自适应拉伸 */
.general-input>.address input {
  flex: 1 1 auto;
  min-width: 120px; /* 控制输入框最小宽度，避免挤压过窄 */
}

保留你之前对.cv-generator>div的flex: 1 1 0设置即可保证两个子容器平分父容器宽度。

规则说明 #

• width: fit-content：默认状态下元素宽度完全适配内部内容的总宽度，实现边框紧贴内容，不会出现多余空白
• max-width: 100%：限制元素最大宽度不超过父容器的可用宽度，当父容器有剩余空间或者内容总宽度超过父容器宽度时，元素会自动扩展占满父容器，内部内容自动换行

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