在firefox (overlay)中使用display flex响应

Question

我对display flex有一个问题，但这只在firefox中发生，我的想法是不放置绝对位置，所以我把所有东西都放在flex中。

有没有可能不使用绝对位置的解决方案？

当浏览器是一个小窗口时，会出现此错误

Google Chrome：

​

​

Firefox：

​

​

CSS：

* {
  padding: 0;
  margin: 0;
}

.w-100 {
  width: 100%;
}

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

.special {
  border-bottom: 1px solid #CCC;
  padding: 10px;
}

input {
  width: 100%;
  padding: 10px;
  border: none;
  background: gray;
}

.flex-2 {
  padding-left: 10px;
  font-size: 28px;
}

.content {
  white-space: nowrap;
}

HTML：

<div class="flex">
  <div class="flex w-100 special">
    <input type="" class="flex-1" />
    <div class="flex-2">
      <i class="fa fa-address-book" aria-hidden="true"></i>
    </div>
  </div>
  <div class="content">
    content info box content
  </div>
</div>

网址：https://codepen.io/anon/pen/RJmWmy

Answer 1

宽度和弹性布局并不能很好地协同工作。此外，您还请求输入为宽度的100%，这意味着它将推出地址簿元素。此外，输入字段有一个最小宽度，您可能需要重置该宽度。也许就像这样..。

注意:我用一个蓝色的背景div替换了地址簿图标，这样我就不必让css url正常工作了。

​

* {
  padding: 0;
  margin: 0;
}

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

.flex > .form-fields {
   flex: 1 1 0px;
   display: flex;
}

.flex > .content {
   flex: 0 0 auto;
   display: flex;
  white-space: nowrap;
}

.flex > .form-fields > .text-input {
  flex: 1 1 0px;
  border-bottom: 1px solid #CCC;
  padding: 10px;
  padding: 10px;
  border: none;
  background: gray;
  min-width: 0px;
}

.flex > .form-fields > .address-book-wrapper {
   flex: 0 0 28px;
   padding: 0px 8px;
   background: blue;
}

<div class="flex">
  <div class="form-fields">
    <input type="" class="text-input" />
    <div class="address-book-wrapper">
      <i class="fa fa-address-book" aria-hidden="true"></i>
    </div>
  </div>
  <div class="content">
    content info box content
  </div>
</div>

​