Flexbox behaving different in chrome and firefox - html

Question

I am working on a pretty simple flexbox gallery editor. I got it working in chrome pretty fast, but with Firefox I am experiencing trouble.
This is how it looks in chrome
And this is how it looks in Firefox
What I could find out by inspecting is, that the space on the right in Firefox equals the width of the add button. I checked some styling but just couldn't find the issue with my css.
Here is my scss and a link to a Pastebin with the CSS: https://pastebin.com/FbAPzM8P
.gallery-images {
text-align: center;
position: relative;
&.horizontal-scroll {
overflow-x: auto;
overflow-y: hidden;
padding-top: 7.5%;
padding-left: 2em;
height: 100%;
display: flex;
.gallery-image {
height: 80%;
display: flex;
flex-wrap: wrap;
flex: 0 0 0;
.gallery-image-content {
display: flex;
flex: 0 0 100%;
height: 100%;
.gallery-image-action {
width: 8em;
}
.gallery-image-content {
height: 100%;
}
.gallery-image-image, .gallery-image-action {
display: flex;
height: 100%;
> img {
height: 100%;
}
}
}
.gallery-image-action-bar {
flex: 0 0 100%;
padding-right: 10px;
padding-left: 10px;
margin-top: -18px;
.button-bar {
margin-left: 7.5em;
text-align: left;
padding-right: 2px;
.button-action-left {
float: left;
}
.button-action-right {
float: right;
margin-right: -2px;
}
}
}
}
}
/** different way of displaying the editor **/
.gallery-image {
.gallery-image-content {
.gallery-image-image, .gallery-image-action {
position: relative;
border: 10px solid transparent;
.gallery-image-edit, .gallery-image-add, .gallery-image-edit-button {
cursor: pointer;
transition: transform 0.3s, background 0.3s, opacity 0.3s;
transform: scale3d(1, 1, 1);
&:hover {
background: darken($gray-100, 6%);
transform: scale3d(0.95, 0.95, 1);
}
}
.gallery-image-edit-button {
background: $gray-100;
position: absolute;
top: 0;
left: 0;
opacity: 0;
z-index: 10;
&:hover {
opacity: 0.8;
border-radius: 4px;
+ .gallery-image-edit {
background: darken($gray-100, 6%);
transform: scale3d(0.95, 0.95, 1);
border-radius: 4px;
}
}
&::before, &::after {
position: absolute;
top: 50%;
left: 0;
margin-top: -0.35em;
width: 100%;
color: $primary;
font-size: 1.5em;
font-family: FontAwesome;
pointer-events: none;
}
&::before {
content: '\f040';
}
&::after {
margin-top: -0.5em;
color: $primary;
content: '\f040';
font-size: 3em;
opacity: 0;
transition: opacity 0.3s, transform 0.3s;
transform: scale3d(2, 2, 1);
}
}
.gallery-image-edit {
opacity: 1;
z-index: 8;
}
> div {
width: 100%;
height: 100%;
&.gallery-image-add {
border-radius: 4px;
background: darken($gray-100, 2%);
&::before, &::after {
position: absolute;
top: 50%;
left: 0;
margin-top: -0.35em;
width: 100%;
color: $primary;
font-size: 1.5em;
font-family: FontAwesome;
pointer-events: none;
}
&::before {
content: '\f067';
}
&::after {
margin-top: -0.5em;
color: $primary;
content: '\f00c';
font-size: 3em;
opacity: 0;
transition: opacity 0.3s, transform 0.3s;
transform: scale3d(2, 2, 1);
}
}
}
}
}
.gallery-image-action-bar {
.button-bar {
.button-action-left {
#extend .button;
#extend .button.primary;
}
.button-action-right {
#extend .button;
#extend .button.primary;
}
}
}
}
}
Here is the SCSS highlighted: https://github.com/Jinya-CMS/Jinya-Gallery-CMS/blob/0af7c5dc7644d35f09de9edb3fbc98a863ececb7/src/DesignerBundle/Resources/public/scss/_gallery-designer.scss
And this the rendered HTML, here is a Pastebin to the HTML rendered by Firefox: https://pastebin.com/pjRvdEYJ
<div class="gallery-images horizontal-scroll" data-source="http://localhost:8000/designer/gallery/artworks/images" data-move="http://localhost:8000/designer/gallery/artworks/%23tempid%23">
<!-- ko foreach: images -->
<div class="gallery-image">
<div class="gallery-image-content">
<div class="gallery-image-action">
<div class="gallery-image-add" role="button" data-bind="click: $root.addImage"></div>
</div>
<div class="gallery-image-image">
<div class="gallery-image-edit-button" role="button" data-bind="click: $root.editImage"></div><img data-bind="attr: { src: source }" class="gallery-image-edit" src="https://placebear.com/1920/1080" /></div>
</div>
<div class="gallery-image-action-bar">
<div class="button-bar">
<!-- ko if: $index() !== 0 --><!-- /ko -->
<!-- ko if: $index() !== ($parent.images().length - 1) -->
<!-- /ko -->
</div>
</div>
</div>
<div class="gallery-image">
<div class="gallery-image-content">
<div class="gallery-image-action">
<div class="gallery-image-add" role="button" data-bind="click: $root.addImage"></div>
</div>
<div class="gallery-image-image">
<div class="gallery-image-edit-button" role="button" data-bind="click: $root.editImage"></div><img data-bind="attr: { src: source }" class="gallery-image-edit" src="http://localhost:8000//public/content_image/d80dfe5ad6693c43a31019ee9398554fd7cc4470fcec159a427e886ab9634982" /></div>
</div>
<div class="gallery-image-action-bar">
<div class="button-bar">
<!-- ko if: $index() !== 0 -->
<!-- /ko -->
<!-- ko if: $index() !== ($parent.images().length - 1) -->
<!-- /ko -->
</div>
</div>
</div>
<div class="gallery-image">
<div class="gallery-image-content">
<div class="gallery-image-action">
<div class="gallery-image-add" role="button" data-bind="click: $root.addImage"></div>
</div>
<div class="gallery-image-image">
<div class="gallery-image-edit-button" role="button" data-bind="click: $root.editImage"></div><img data-bind="attr: { src: source }" class="gallery-image-edit" src="http://localhost:8000//public/content_image/4c58d75659edeb84f342376679c9f5382db0181920f9206fcc7e86648a8246c9" /></div>
</div>
<div class="gallery-image-action-bar">
<div class="button-bar">
<!-- ko if: $index() !== 0 -->
<!-- /ko -->
<!-- ko if: $index() !== ($parent.images().length - 1) --><!-- /ko -->
</div>
</div>
</div><!-- /ko -->
<div class="gallery-image">
<div class="gallery-image-content">
<div class="gallery-image-action">
<div class="gallery-image-add" role="button" data-bind="click: addImage"></div>
</div>
</div>
</div>
</div>
Does anyone have an idea for me where I can check for the issue or even has a solution?