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

【问题标题】：How to prevent the input field from pushing the last element beyond the div?如何防止输入字段将最后一个元素推到 div 之外？
【发布时间】：2016-09-25 07:03:30
【问题描述】：

这个代码笔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;
}

解决方案：

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

【问题讨论】：

标签： html forms css flexbox

【解决方案1】：

取自这里：How to keep a flex item from overflowing due to its text?

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

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

【讨论】：

这解决了我的输入不正确的问题。多爱

【解决方案2】：

设置宽度为，

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

}

【讨论】：

【解决方案3】：

也许您在文本框的宽度方面遇到问题。文本框不会根据屏幕大小改变他的大小。

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

我添加了width:100%;，它看起来不错。请检查一下。

【讨论】：