Piotr Berebecki Piotr Berebecki - 6 months ago 15
CSS Question

How to prevent the input field from pushing the last element beyond the div?

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.

Answer

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.