Firefox flexbox空格间的错误-项目已超出容器

Question

我创建了simpele组件，当我创建了flex容器时，里面的东西（例如后缀）已经开箱了。

仅在Firefox中发生。我在flex项目中使用了空格，但是项目不在flex容器中。当我将Input设置为更高时，它会起作用，但这是我所不想要的。

我创建了代码笔here，因为我不能在代码段中使用Sass。

有人知道吗？

Codepen：https://codepen.io/ondrejko/pen/wvageWg

// Component local variables
$input-border-color: #D8DADC;
$input-border-disabled-color: #E8EAEC;
$input-text-gray: #979797;
$input-text-color: #457CCC;
$input-focus-color: #0284FF;
$input-border-radius: 8px;
$input-font-size: 16px;
$input-height: 40px;
// Base structure
.Input {
  position: relative;
  max-width: 200px;
}

// Input container for all elements
.Input__container {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: $input-height;
  background-color: #fff;
  font-size: $input-font-size;
}

// Fake input, who replaces real input and is in front of input
.Input__fake-input {
  position: absolute;
  z-index: 1;
  top: 0px;
  left: 0px;
  width: 100%;
  height: inherit;
  border-width: 1px;
  border-style: solid;
  border-color: $input-border-color;
  border-image: none;
  border-radius: $input-border-radius;
  font-size: $input-font-size;
  transition: all 0.15s ease-in-out 0s;
}

// Input text field for add text
.Input__field {
  z-index: 2;
  flex: 1 1 20%;
  width: 100%;
  height: 100%;
  padding: 0px 12px;
  border: 0;
  color: $input-text-color;
  background-color: transparent;
  font-size: inherit;
  -webkit-appearance: none;
  &:focus {
    outline: none;
    &~.Input__fake-input {
      outline: none;
      border: 1px solid $input-focus-color;
    }
  }
}

// Input type PREFIX
.Input__prefix {
  z-index: 3;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  padding: 0px 0px 0px 10px;
  color: $input-text-gray;
  pointer-events: none;
}

// Input type SUFFIX
.Input__suffix {
  z-index: 3;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0px 10px 0px 0;
  color: $input-text-gray;
}

// Input type ICON
.Input__icon {
  position: relative;
  z-index: 3;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: calc(100% - 2px);
  color: $input-text-gray;
  padding: 0px 10px;
  border-left: 1px solid $input-border-color;
  cursor: pointer;
  & img,
  svg {
    width: 25px;
  }
}

// Input type CONTROLS
.Input__controls {
  width: 72px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 0 10px;
  &+.Input__fake-input {
    width: calc(100% - 80px);
  }
}

// Input type BUTTON
.Input__button {
  width: 32px;
  height: 32px;
  background: red;
  border-radius: 100px;
  border: 0;
  color: #fff;
  padding: 0;
  cursor: pointer;
  & .Icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  & img,
  svg {
    max-width: 16px;
  }
}

// Modificator --has-status
.Input--has-status {
  position: relative;
}

.Input--has-status::after {
  content: '';
  position: absolute;
  top: -4px;
  right: -4px;
  z-index: 3;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: #1A73E8;
}

// --has-status types
.Input--has-status.success::after {
  background: #37C9AD;
}

.Input--has-status.warning::after {
  background: #FFB000;
}

// Modificator --is-invalid
.Input--is-invalid {
  & .Input__fake-input {
    border: 1px solid #FF0054; // tady barva bude z global variables 
  }
  & .Input__field {
    color: #FF0054; // tato barva bude z global variables
    &:focus~.Input__fake-input {
      border-color: #FF0054; // tady barva bude z global variables
    }
  }
}

// Modificator --is-disabled
.Input--is-disabled {
  & .Input__fake-input {
    background-color: $input-border-disabled-color;
    color: #868C92;
    cursor: not-allowed;
    border: 1px solid $input-border-disabled-color;
  }
  & .Input__field {
    color: #868C92;
    cursor: not-allowed;
  }
}

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,900&display=swap" rel="stylesheet">


<div class="container">
  <form>
    <div class="row">
      <h1> Types</h1>
      <h2>Input - default</h2>
      <div class="Input">
        <div class="Input__container">
          <input class="Input__field" type="text" placeholder="Placeholder">
          <div class="Input__fake-input"></div>
        </div>
      </div>

      <h2>Input - prefix</h2>
      <div class="Input">
        <div class="Input__container">
          <div class="Input__prefix">
            <span class="Prefix">Prefix</span>
          </div>
          <input class="Input__field" type="text" placeholder="Placeholder" value="Lorem ipsum dolor">
          <div class="Input__fake-input"></div>
        </div>
      </div>

      <h2>Input - suffix</h2>
      <div class="Input">
        <div class="Input__container">
          <input class="Input__field" type="text" placeholder="Placeholder" value="Lorem ipsum dolor">
          <div class="Input__suffix">
            Suffix
          </div>
          <div class="Input__fake-input"></div>
        </div>
      </div>


      <h2>Input - icon</h2>
      <div class="Input">
        <div class="Input__container">
          <input class="Input__field" type="text" placeholder="Placeholder">
          <div class="Input__icon">
            <img src="http://www.ondrejkonecny.cz/assets/svg/calculator.svg">
          </div>
          <div class="Input__fake-input"></div>
        </div>
      </div>



      <br><br>
      <h1>Modificators</h1>
      <h2>Input - Load Success</h2>
      <div class="Input Input--has-status success">
        <div class="Input__container">
          <input class="Input__field" type="text" placeholder="Placeholder">
          <div class="Input__fake-input"></div>
        </div>
      </div>

      <h2>Input - Load Warning</h2>
      <div class="Input Input--has-status warning">
        <div class="Input__container">
          <input class="Input__field" type="text" placeholder="Placeholder">
          <div class="Input__fake-input"></div>
        </div>
      </div>


      <h2>Input - Invalid</h2>
      <div class="Input Input--is-invalid">
        <div class="Input__container">
          <input class="Input__field" type="text" placeholder="Placeholder" value="Lorem ipsum dolor">
          <div class="Input__fake-input"></div>
        </div>
      </div>

      <h2>Input - Disabled</h2>
      <div class="Input Input--is-disabled">
        <div class="Input__container">
          <input class="Input__field" type="text" placeholder="Placeholder" value="Lorem ipsum" disabled>
          <div class="Input__icon">
            <img src="http://www.ondrejkonecny.cz/assets/svg/calendarDay.svg">
          </div>
          <div class="Input__fake-input"></div>
        </div>
      </div>
    </div>
  </form>
</div>

Answer 1

您正在使用两种类型的Input类型，并且要引用相同的CSS类来实现（例如EX .Input.Input__field，.Input__suffix）；

1）一个​​带前缀，后缀带图标（输入框应占75％，图标应占25％）。2）输入修改器。 （默认类型：输入框应占100％）

最好添加一个类（例如：.default）以区分带有Icon的输入框和没有上面的Icon的输入框。

我在这里修改了代码@ code-pen：https://codepen.io/mediraviteja/pen/OJyrozR

我在下面进行的代码更改。

a）向容器div（EX：）添加类“ 。default”，用于所有全角输入，例如（默认输入，修饰符输入）

b）在下面的类中更改CSS

.Input__field{
    width: 100%; -- remove css property
    max-width: 76%; -- add css property
}

.Input__suffix{
    max-width: 26%; -- add css property
}

**Add new class** 

 .default .Input__field{
    max-width: 100%;    
}

.default .Input__suffix{
    max-width: 100%;  
}

我希望这对您有用。