Firefox flexbox space-between bug - item is out of the container - html

Question

I created a simple component and when I created a flex container, items inside (for example suffix) are out the box, but only in Firefox. I use space-between in flex item, but item is out of the flex container. It works when I set height with of the Input, but that's what I don't want.
I created a CodePen here, because I can't use Sass here in a Stack Snippet.
Does anybody knows about this?
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

You are using two types of Input types, and you are referring the same CSS classes to achieve (EX .Input.Input__field,.Input__suffix);
one with Prefix,Suffix with Icon (Input box should occupy 75%, Icon should occupy 25%).
Input Modificators. (A default type: Input box should occupy 100%)
Its better you add a class(ex : .default ) to differentiate the input box with Icon and without Icon like above.
I modified code here # code-pen : https://codepen.io/mediraviteja/pen/OJyrozR
Code changes I did below.
a) Added class ".default" to the container div(EX : ) for all the full width inputs like (Default input, Modificator inputs)
b) Do CSS changes in below class
.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%;
}
change the HTML element
<div class="Input "> to <div class="Input default">
when ever you need full with Input box like(Default input, Input -Warning,Input - Invalid boxes,etc.)