Как предотвратить ввод входного поля последним элементом за пределами div?

Question

Этот код http://codepen.io/PiotrBerebecki/pen/JKPeoY демонстрирует мою проблему. Когда я уменьшаю ширину браузера, значок справа выталкивается вправо по полю ввода. Есть ли способ предотвратить это?

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; 
} 

РЕШЕНИЕ:

Как сообщил ниже, добавив width: 100% или width: inherit к .search-field имеет SOLV проблема.

Answer 1

Возможно, вы столкнулись с проблемой в ширину текстового поля. текстовое поле не меняет свой размер в соответствии с размером экрана.

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

Я добавляю width:100%;, и это кажется хорошим. Пожалуйста, проверьте это.

Answer 2

ширина набора, как,

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

}

Answer 3

Взято отсюда: How to keep a flex item from overflowing due to its text?

спецификации W3C говорит, «По умолчанию, гибкие элементы не будут сжиматься меньше их минимального размера контента (длина самого длинного слова или элемента фиксированного размера). Чтобы изменить это, установите свойство «min-width» или «min-height».

Вам просто нужно добавить «min-width: 1px;» в поле поиска и будет работать