Firefox flexbox space-between bug - 项目不在容器中

Posted 2023-03-05

【中文标题】Firefox flexbox space-between bug - 项目不在容器中

【英文标题】：Firefox flexbox space-between bug - item is out of the container

【发布时间】：2020-09-06 21:13:53

【问题描述】：

我创建了一个简单的组件，当我创建一个 flex 容器时，里面的项目（例如后缀）是开箱即用的，但仅限于 Firefox。我在弹性项目中使用空格，但项目不在弹性容器中。当我使用输入设置高度时它可以工作，但这是我不想要的。

我创建了一个 CodePen here，因为我不能在 Stack Snippet 中使用 Sass。

有人知道吗？

代码笔：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>

【问题讨论】：

仅供参考，让 Sass 工作只需将其编译成 CSS，然后在 Stack Snippet 中包含该 CSS。

【参考方案1】：

您使用了两种类型的 Input 类型，并且您引用了相同的 CSS 类来实现 (EX .Input.Input__field,.Input__suffix);

一个带前缀，后缀带图标（输入框占75%，图标占25%）。 输入修饰符。 （默认类型：输入框占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%;  

更改 html 元素

<div class="Input "> to <div class="Input default"> 

当您需要完整的输入框时（默认输入、输入 - 警告、输入 - 无效框等）

【讨论】：

谢谢，这对我有用。它让我想到了我拥有的字段，我发现解决方案将“溢出：隐藏”添加到“Input__field”，它的工作原理就是这样。我仍然不明白，为什么它是开箱即用的，但它仍然有效。谢谢！