实现类似Gmail收件人栏：父Div固定宽度下子Div自动换行自适应高度

核心解决方案（Flexbox 实现） #

通过 CSS Flexbox 可以轻松实现固定宽度下的自动换行、高度自适应效果，完全匹配你需要的Gmail风格布局。

HTML 结构

<!-- 主容器 -->
<div class="recipient-container">
  <!-- 收件人标签 -->
  <div class="recipient-tag">john.doe@example.com</div>
  <div class="recipient-tag">jane.smith@example.com</div>
  <div class="recipient-tag">a-really-long-email-address-that-should-take-full-line@very-long-domain-name-example.com</div>
  <!-- 搜索输入框 -->
  <input type="text" class="recipient-input" placeholder="添加收件人">
</div>

CSS 代码

.recipient-container {
  width: 600px; /* 固定宽度，根据需求调整 */
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap; /* 关键：超出宽度自动换行 */
  gap: 8px; /* 收件人标签之间的间距 */
  align-items: center; /* 标签与输入框垂直居中 */
  min-height: 40px; /* 未选择收件人时的最小高度 */
  box-sizing: border-box; /* 避免内边撑大容器宽度 */
}

.recipient-tag {
  background-color: #e0e7ff; /* 模拟Gmail标签背景 */
  padding: 6px 10px;
  border-radius: 20px;
  font-size: 14px;
  white-space: nowrap; /* 禁止标签内文字换行，保持完整 */
}

.recipient-input {
  border: none;
  outline: none;
  flex-grow: 1; /* 输入框自动填充剩余空间 */
  min-width: 120px; /* 输入框最小宽度，防止被挤得太窄 */
  font-size: 14px;
}

关键特性说明 #

• 自动换行：容器设置flex-wrap: wrap，当收件人标签总宽度超过容器固定宽度时，自动换行到下一行，容器高度随之自适应。
• 长邮箱处理：收件人标签设置white-space: nowrap，单个长邮箱会自动独占一行，不会被截断或拆分。
• 输入框自适应：flex-grow: 1保证输入框始终占据剩余空间，min-width避免输入框被挤压到无法输入的宽度。

兼容老浏览器方案（Inline-block 实现） #

如果需要兼容不支持Flexbox的老浏览器，可以用inline-block替代：

.recipient-container {
  width: 600px;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  min-height: 40px;
  box-sizing: border-box;
}

.recipient-tag {
  display: inline-block;
  background-color: #e0e7ff;
  padding: 6px 10px;
  border-radius: 20px;
  font-size: 14px;
  margin: 4px 8px 4px 0;
  white-space: nowrap;
}

.recipient-input {
  border: none;
  outline: none;
  font-size: 14px;
  min-width: 120px;
}

内容的提问来源于stack exchange，提问作者Rae Christian Meron