With display flex in firefox (overlay) responsive

Question

I have a problem with the display flex, but this only happens in firefox, the idea is not to place absolute position, so I put everything in flex.

Is there a possible solution without using absolute positions?

This error occurs when the browser is a small window

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>

URL: https://codepen.io/anon/pen/RJmWmy

You just need to add `min-width: 0` to the `input` element. https://codepen.io/anon/pen/jKjEbj — Michael Benjamin, Jul 05 '18 at 18:42
Thanks for your support, I did not know that the min-width was the fixed for firefox — Raul Valverde, Aug 26 '18 at 01:26

score 0 · Answer 1 · answered Jul 04 '18 at 18:27

Width and flex layouts don't really work well together. Also you requested the input be 100% of the width which means it would push out the address book element. Also, input fields have a minimum width which you would likely need to reset. Maybe something like this...

Note: I replaced the address book icon with a blue background div so I didn't have to get the css url working.

* {
  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>

With display flex in firefox (overlay) responsive

1 Answers1