Блог

Главная - Вопросы по программированию - Как я могу предотвратить расширение flexbox, если он содержит поле ввода текста?

Как я могу предотвратить расширение flexbox, если он содержит поле ввода текста?

#html #css #flexbox

#HTML #css #flexbox

Вопрос:

Следующий CSS / HTML дает мне желаемый результат — три поля в строке, среднее имеет фиксированную ширину, а внешние занимают (в равном количестве) пространство с обеих сторон:

 #container {
  display: flex;
}
#container > * {
  background: #efefef;
}
#container .fixed-width-40px {
  width: 40px;
  background: #ccc;
}
.fill-available-horizontal-space {
  flex-grow: 1;
}
<div id="container">
    <div class="fill-available-horizontal-space">aaa</div>
    <div class="fixed-width-40px">bbb</div>
    <div class="fill-available-horizontal-space">ccc</div>
</div>

Однако, если я добавлю форму (и поле ввода текста внутри нее) в третье поле, третье поле станет шире, а первое поле станет короче.

Я хочу, чтобы первое и третье поля сохраняли одинаковую ширину, но введение поля ввода текста разрушает это.

Пожалуйста, вы знаете, как я могу это преодолеть?

 <div id="container">
    <div class="fill-available-horizontal-space">aaa</div>
    <div class="fixed-width-40px">bbb</div>
    <div class="fill-available-horizontal-space">
        <form>
            <input type="text" name="test"/>
        </form>
    </div>
</div>

Ответ №1:

Ключ — «flex-grow: 1;» в дочерних элементах, которые вы хотите заполнить, доступное пространство.

 * {
  box-sizing: border-box;
}
#container {
  display: flex;
}
#container > * {
  background: #efefef;
}
#container .fixed-width-40px {
  width: 40px;
  background: #ccc;
}
.fill-available-horizontal-space {
  flex-grow: 1;
  width: 50%;
}
input {
  width: 100%;
  padding: .5rem;
}  
 <div id="container">
    <div class="fill-available-horizontal-space"></div>
    <div class="fixed-width-40px">bbb</div>
    <div class="fill-available-horizontal-space"><input></div>
</div>

Комментарии:

1. Я не понимаю, почему мой пост был связан с тем, который не решает проблему, с которой я столкнулся, я уже связался с дубликатом, потому что я искал версию исправления Flexbox. В любом случае, спасибо alotropico за исправление, я уже пробовал это, но это не сработало, потому что у меня есть форма и один ввод текста в третьем поле, и это делает третье поле шире первого. Я написал этот вопрос, не осознавая, что формы внутри divs сделают flexboxes шире.

2. TBH на проблему был дан ответ с использованием flexbox в этом вопросе, во втором и третьем наиболее проголосовавших ответах, которые новее принятого. Особенность flex в том, что он обычно не дает вам точных чисел, а скорее полезных гибких приближений, в этом случае, если вы хотите, чтобы рост конкретного дочернего элемента имел приоритет, вы можете увеличить его значение flex-grow. Приветствия

3. Я играл, но этого не произошло, поэтому моим последним средством было дублировать содержимое третьего поля в первое, а затем сделать содержимое первого поля видимым: скрытым. Грязный, да. Если у меня будет время, я поиграю еще.

4. Я отредактировал свой ответ, если вы дадите 50% ширины расширяющимся разделам, они должны иметь одинаковый размер, независимо от содержимого

5. Если бы я мог принять ваш ответ во второй раз, я бы это сделал, но вместо этого мог только проголосовать за него. спасибо, приятель 🙂