在React组件的文本输入框内放置图标，flex布局实现失败求排查

现有代码核心问题： #

• 目前flex布局仅将图标与输入框作为同级元素并排排布，未实现图标位于输入框内部的效果
• 输入框未设置左侧内边距，即便调整图标位置，后续输入的文字也会被图标遮挡
• 无定位上下文，无法精准控制图标在输入框内的位置
• 语法规范层面：<input>是单标签，不需要写闭合标签</input>，不过该问题不影响布局效果

推荐实现方案（兼容性最优，无定位冲突） #

将外层wrapper模拟成输入框外观，输入框本身去掉边框，和外层融为一体：

.wrapper {
  display: flex;
  align-items: center;
  /* 把原本输入框的边框、圆角等样式移到外层，模拟输入框视觉效果 */
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  height: 50px;
  padding: 0 12px;
}

.icon {
  height: 1.5rem;
  width: 1.5rem;
  background-color: red;
  /* 避免图标被挤压变形 */
  flex-shrink: 0;
  /* 图标和输入内容留出间距 */
  margin-right: 8px;
}

.input {
  /* 去掉输入框默认边框、点击高亮，和外层融为一体 */
  border: none;
  outline: none;
  /* 撑满剩余宽度 */
  flex: 1;
  height: 100%;
}

<div class="wrapper">
  <div class="icon"></div>
  <input class="input">
</div>

可选方案：绝对定位实现 #

如果需要保留输入框本身的边框样式，可以用绝对定位实现：

.wrapper {
  display: flex;
  align-items: center;
  /* 相对定位作为图标定位的上下文 */
  position: relative;
}

.icon {
  height: 1.5rem;
  width: 1.5rem;
  background-color: red;
  padding: 4px;
  /* 绝对定位固定在输入框左侧 */
  position: absolute;
  left: 8px;
}

.input {
  height: 50px;
  /* 左侧内边距大于图标总宽度，避免文字被遮挡 */
  padding-left: calc(1.5rem + 20px);
  border: 1px solid #d9d9d9;
  border-radius: 4px;
}

<div class="wrapper">
  <div class="icon"></div>
  <input class="input">
</div>

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