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.

Piotr Berebecki
  • 7,428
  • 4
  • 33
  • 42

3 Answers3

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.

Umair Iftikhar
  • 438
  • 5
  • 12
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

Community
  • 1
  • 1
LordNeo
  • 1,195
  • 1
  • 8
  • 21
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*/

}

Nitin Dhomse
  • 2,524
  • 1
  • 12
  • 24