Question

此codepen http://codepen.io/PiotrBerebecki/pen/JKPeoY演示了我的问题。当我减小浏览器宽度时，右侧的图标会被输入字段向右推出。有办法防止这种情况吗？

HTML：

<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;
}

SOLUTION：

如下所述，将width: 100%或width: inherit添加到.search-field已解决了问题。

Answer 1

也许你在文本框的宽度上遇到问题。文本框不会根据屏幕大小更改其大小。

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

我添加width:100%;，它似乎很好。请检查一下。

Answer 2

从这里采取：here

W3C规范说：“默认情况下，flex项目不会缩小到最小内容大小（最长字或固定大小元素的长度）之下。要更改此设置，请设置'min-width'或'min-height'属性。“

所以你只需要添加“min-width：1px;”到搜索字段，它将工作

Answer 3

将宽度设置为，

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

}

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

3 个答案: