1

This codepen http://codepen.io/PiotrBerebecki/pen/JKPeoY demonstrates my problem. When I decrease browser width then the icon on the right gets pushed out to the right by the input field. Is there a way to prevent this?

HTML:

<div class="search-group">
  <span class="icon"><i class="fa fa-search"></i></span>
  <input type="text" class="search-field">
  <span class="icon"><i class="fa fa-random"></i></span>
</div>

CSS:

.search-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  border: 1px solid #777;
  font-family: Arial;
}

.icon {
  background: #ccc;
  color: #fff;
  padding: 0.8em 1em;
}

.search-field {
  border: none;
  outline: none;
  flex: 1;
  font-size: 1em;
  padding: 0.8em 1em;
}

SOLUTION:

As advised below, adding width: 100% or width: inherit to the .search-field has solved the problem.

3 Answers 3

2

maybe you are facing problem in the width of textbox. textbox is not changing his size according to the screen size.

.search-field {
  border: none;
  outline: none;
  flex: 1;
  font-size: 1em;
  padding: 0.8em 1em;
  width:100%;
}

I add width:100%; and its seems good. Please check this out.

0
2

Taken from here: How to keep a flex item from overflowing due to its text?

W3C specification says, "By default, flex items won't shrink below their minimum content size (the length of the longest word or fixed-size element). To change this, set the ‘min-width’ or ‘min-height’ property."

So you just need to add "min-width: 1px;" to the search-field and it will work

1
  • THIS solved my problems with the input not behaving correctly. Much love <3
    – Ole
    Sep 1, 2016 at 9:57
1

set width as,

.search-field {
  border: none;
  outline: none;
  flex: 1;
  font-size: 1em;
  padding: 0.8em 1em;
  width:inherit;    /* will take parent container width*/

}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.