如何防止输入字段将最后一个元素推到div之外？

Question

这个密码笔http://codepen.io/PiotrBerebecki/pen/JKPeoY说明了我的问题。当我减小浏览器宽度时，右边的图标会被输入字段推到右边。有没有办法防止这种情况？

超文本标记语言：

<div class="search-group">
  <span class="icon"><i class="fa fa-search"></i></span>
  <input type="text" class="search-field">
  <span class="icon"><i class="fa fa-random"></i></span>
</div>

CSS:

.search-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  border: 1px solid #777;
  font-family: Arial;
}

.icon {
  background: #ccc;
  color: #fff;
  padding: 0.8em 1em;
}

.search-field {
  border: none;
  outline: none;
  flex: 1;
  font-size: 1em;
  padding: 0.8em 1em;
}

解决方案：

如下所示，向. search ch-field中添加宽度：100%或宽度：继承已经解决了这个问题。

Answer 1

设置宽度为，

.search-field {
  border: none;
  outline: none;
  flex: 1;
  font-size: 1em;
  padding: 0.8em 1em;
  width:inherit;    /* will take parent container width*/

}

Answer 2

摘自这里：如何防止flex项因其文本而溢出？

W3C规范说，“默认情况下，flex项不会收缩到其最小内容大小（最长单词或固定大小元素的长度）以下。若要更改此设置，请设置“最小宽度”或“最小高度”属性。”

所以你只需要加上“最小宽度：1px到搜索字段，它将工作

Answer 3

也许你正面临的问题，在文本框的宽度。文本框是不改变他的大小根据屏幕的大小。

.search-field {
  border: none;
  outline: none;
  flex: 1;
  font-size: 1em;
  padding: 0.8em 1em;
  width:100%;
}

我加上宽度：100% 而且它看起来不错。请看这个。