Html 弹性项目不'；在Webkit浏览器中不在线显示

我创建了一个带有小齿轮的文本字段，它在弹出菜单中提供了关于如何处理搜索字符串的选项。对于某些零件，它使用灵活的长方体布局

在Firefox中，我得到了预期的结果：

在Webkit浏览器（Safari和Vivaldi）中，我得到以下结果：

正如你所看到的，齿轮没有保持在直线上。这是我主要关心的问题。我不太担心菜单文本没有拉伸，因为给它的任何容器一个宽度都可以很容易地解决这个问题

我目前没有Chrome浏览器，但我怀疑它可能会以与其他Webkit浏览器类似的方式呈现它

这是我认为与我的问题相关的css

.flex-search {
  position: relative;
  display: -webkit-flex; // <--
  display: flex; // <--
  -webkit-align-items: stretch; // <--
  align-items: stretch; // <--
  width: 100%;
  border: 1px solid #222;
  border-radius: .4em;
  background-color: #fff;
}
.flex-search > :first-child {
  -webkit-flex: 1; // <--
  flex: 1; // <--
}
.flex-search > :last-child {
  width: 2em; // <--
  border-left: 1px solid #ccc;
  cursor: pointer;
}

*{
保证金：0；
填充：0；
边界：中等无；
边界间距：0；
大纲：无；
大纲：0；
颜色：继承；
字体家族：继承；
字体大小：继承；
字体大小：继承；
行高：继承；
文本对齐：继承；
文字装饰：无；
文本缩进：0；
列表样式：无外无；
背景：无重复滚动0 0透明；
}
*：-moz焦点内部{
边界：0；
填充：0；
}
html{
颜色：#222；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：10px；
字体大小：正常；
文本对齐：左对齐；
身高：100%；
}
身体{
字体大小：1.4rem；
线高：1.5em；
最小高度：100%；
背景色：#fff；
}
div{
利润率：150px自动0；
宽度：300px；
}
：-webkit输入占位符{
颜色：#666；
字号：85%；
}
：-moz占位符{
颜色：#666；
字号：85%；
}
：-moz占位符{
颜色：#666；
字号：85%；
}
：-ms输入占位符{
颜色：#666；
字号：85%；
}
：焦点：：-webkit输入占位符{
颜色：#ccc；
}
：焦点：-moz占位符{
颜色：#ccc；
}
：焦点：--moz占位符{
颜色：#ccc；
}
：焦点：-ms输入占位符{
颜色：#ccc；
}
.flex搜索{
位置：相对位置；
显示：-webkit flex；
显示器：flex；
-webkit对齐项目：拉伸；
对齐项目：拉伸；
宽度：100%；
边框：1px实心#222；
边界半径：.4em；
背景色：#fff；
}
.flex搜索>：第一个孩子{
-webkit-flex:1；
弹性：1；
}
.flex搜索>：最后一个子项{
宽度：2米；
左边框：1px实心#ccc；
光标：指针；
}
.flex搜索>：最后一个子项：之后{
内容：'\00a0'；
显示：块；
宽度：100%；
身高：100%；
背景：url（'数据：image/png；base64，IVBORW0Kggaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa；
不透明度：0.5；
}
.flex搜索>：最后一个子项：悬停：之后{
不透明度：1；
}
.flex搜索>：最后一个孩子>：第一个孩子{
位置：绝对位置；
右：-1px；
底部：0；
显示：无；
填充：0.25em2.1em0；
颜色：#fff；
}
.flex搜索>：最后一个子项：悬停>：第一个子项{
显示：块；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
.flex搜索标签{
显示：块；
光标：指针；
背景色：#ccc；
}
.flex搜索标签>span{
位置：相对位置；
显示：块；
字号：85%；
文本对齐：右对齐；
填料：2em.8em.2em 30%；
}
.flex搜索标签：悬停>跨距，
.flex搜索输入[type=“radio”]：选中~span{
颜色：#999；
背景色：#eee；
}
.flex搜索输入[type=“radio”]：选中~span:before{
位置：绝对位置；
左：.7em；
内容:'✔';
}
.flex搜索输入[type=“radio”]{
显示：无；
}
.flex搜索输入[type=“text”]{
宽度：100%；
框大小：边框框；
填充物：2em.8em；
}

包含
开始于
以
等于

在下面的例子中，您说

span

应该是

左填充：30%

。因此文本的空间太小。只需删除30%就可以了。您也可以添加

.8em

作为第四个参数，但浏览器会自动为您执行

.flex-search label>span {
  position: relative;
  display: block;
  font-size: 85%;
  text-align: right;
  padding: .2em .8em .2em; <-- 30% removed
}

*{
保证金：0；
填充：0；
边界：中等无；
边界间距：0；
大纲：无；
大纲：0；
颜色：继承；
字体家族：继承；
字体大小：继承；
字体大小：继承；
行高：继承；
文本对齐：继承；
文字装饰：无；
文本缩进：0；
列表样式：无外无；
背景：无重复滚动0 0透明；
}
*：-moz焦点内部{
边界：0；
填充：0；
}
html{
颜色：#222；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：10px；
字体大小：正常；
文本对齐：左对齐；
身高：100%；
}
身体{
字体大小：1.4rem；
线黑格
<fieldset>
  <div class="flex-search">
    ....
  </div>
</fieldset>