Input text и кнопка в одну строку
Доброе время суток, столкнулся с такой проблемой: есть 4 колонки реализованные на flex. Флекс элементы имеют по 25% ширины контейнера. Однако когда в одну колонку я поместил поле text input и кнопку колонка увеличивается и происходит перенос колонки вниз. Испектор показывает что ширина этой колонки становится больше несмотря на то что флекс элементам установлено свойство flex: 0 1 25%; Буду очень благодарен за ответ
<div class="main__row">
<div class="main__column">
<form action="" class="main__form">
<input type="text" class="main__input">
<input type="button" class="main__btn" value="Add to favorites">
</form>
</div>
<div class="main__column">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure explicabo praesentium nam fugit odio
eos laudantium voluptas nobis tenetur harum? Soluta minus possimus in reiciendis iusto dolorum
exercitationem quae odio?</p>
</div>
<div class="main__column">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure explicabo praesentium nam fugit odio
eos laudantium voluptas nobis tenetur harum? Soluta minus possimus in reiciendis iusto dolorum
exercitationem quae odio?</p>
</div>
<div class="main__column">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure explicabo praesentium nam fugit odio
eos laudantium voluptas nobis tenetur harum? Soluta minus possimus in reiciendis iusto dolorum
exercitationem quae odio?</p>
</div>
</div>
.main {
// .main__container
&__container {
width: 950px;
margin: 0 auto;
}
// .main__row
&__row {
display: flex;
flex-wrap: wrap;
}
// .main__column
&__column {
flex: 0 1 25%;
padding: 0 5px;
}
// .main__form
&__form {
display: inline-flex;
}
// .main__input
&__input {
border: dashed;
}
// .main__btn
&__btn {
}
}
Здесь можно посмотреть как это выглядит