Почему flex-контейнер с input элементами расширяет границы основного блока?

Question

[Сергей Маркин]

Основной блок содержит 2 блока
1-й с некоторым текстом
2-й flex блок с input элементами

2-й блок как будто не видит ширины основного блока, которую задает 1-й блок (sometext)
и расширяет основной.

Подскажите как решить данную проблему ?

Пример : https://jsfiddle.net/sarcus/1vmaf3wo/14/

<style>
.cont { 
            position: absolute;
            top : 200px; left: 30px;
            border: 1px solid #ccc;
        }
        .ctrl {  
            display: flex; 
            width: 100%;
            flex-direction: row;
            border: 1px solid#ccc; 
        }
        .btn { 
            flex: 0 0 auto;
            
        }
        .inp {
            flex: 1 1 auto;
            width: 100%;
        }
</style>
<div class="cont">
            <div class="sometext">555 5555 5555 5555 5556</div>
            <div class="ctrl">
                    <input type="button" class="btn"  value="<<" />
                    <input class="inp" type="text" />
                    <input type="button" class="btn" value=">>" />
            </div>
            
        </div>

Comments

[Erl]

да вроде всё норм

[Сергей Маркин]

Вот и я о том же. Не могу добиться чтобы было так https://jsfiddle.net/1vmaf3wo/17/

flex контейнер по ширине основного блока. Кнопки в данном примере убрал для наглядности.

[historydev]

Вот https://jsfiddle.net/1bc5muj6/6/

[Модератор]

Сергей Маркин, Для комментирования ответа жмите линк "Комментировать" под ответом
Не нужно писать комментарий в форме для ответа
Оповещения о такой реплике не поступит автору ответа

Не нужно засорять секцию ответов "спасибовсем", "решено" и тп

Answer 1

[Сергей delphinpro]

У инпута есть своя дефолтная ширина.

2-й блок как будто не видит ширины основного блока, которую задает 1-й блок (sometext)

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

Исходя из того, что инпут имеет дефолтно заданную ширину (в инспекторе не видно, не ищите), мы можем тупо обнулить ее:

.inp {
  flex: 1 1 auto;
  width: 0;
}

Comments

[Сергей delphinpro]

можно еще min-width задать, чтобы инпут совсем не сплющился

[Сергей Маркин]

Про дефолтную ширину знал, но про width: 0; не подумал пытался решить с min-width.
Сработало!

Answer 2

[historydev]

У вас кнопки стоят по бокам input, а как он может быть 100% ширины если часть этих 100% уже забрали кнопки?

Answer 3

[Сергей Маркин]

Но если вместо input (class='inp') вставить div то все приходит в норму:
https://jsfiddle.net/1vmaf3wo/83/