为何输入框旁的SVG图标无法显示？调整宽度后恢复正常

这个问题的核心是flex容器里的输入框宽度设置导致SVG被挤出可视区域。

浏览器中，若给input设置width:100%，在flex容器里它会试图占据整个容器宽度，但SVG也需要占用固定空间（这里是15px），两者总宽度超过容器宽度后，flex容器默认不换行，输入框的flex-shrink默认值为1（允许缩小），但仍会把SVG挤到容器外部，导致你看不到它。改成90%宽度时，输入框+SVG的总宽度小于容器宽度，SVG自然就能显示了。

推荐两种更合理的处理方式，无需依赖固定百分比：

方案1：让输入框自动填充剩余空间 #

给input添加flex:1属性，让它自动占据容器的剩余宽度，SVG保持自身尺寸：

.flex {
  display: flex;
  align-items: center;
}

.jc {
  justify-content: center;
}

.search-input {
  flex: 1;
  margin-left: 8px; /* 可选，添加间距提升美观度 */
}

对应的HTML：

<section class="flex jc">
  <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" color="#333" style="color:#333" height="15" width="15" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke-miterlimit="10" stroke-width="32" d="M221.09 64a157.09 157.09 0 10157.09 157.09A157.1 157.1 0 00221.09 64z"></path><path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="M338.29 338.29L448 448"></path></svg>
  <input type="text" name="search" class="search-input">
</section>

方案2：给容器添加内边距避免溢出 #

如果一定要用固定宽度的输入框，给flex容器添加左右内边距，确保输入框和SVG的总宽度在容器范围内：

.flex {
  display: flex;
  align-items: center;
  padding: 0 12px; /* 左右内边距，留出SVG的显示空间 */
}

.jc {
  justify-content: center;
}

.search-input {
  width: 100%;
}

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