Вот требования к коду:
- Форма должна иметь ширину, достаточную для размещения всех ее элементов без переноса строк.
- Внутри формы должно быть одно поле ввода и две кнопки.
- Элементы формы (поле ввода и кнопки) должны быть расположены в две строки.
- Поле ввода должно занимать всю ширину формы.
- Две кнопки должны быть одинакового размера, независимо от длины их содержимого.
- «white-space: nowrap;» надо оставить, чтобы тексты кнопок не разрывались на несколько строк
- Не должно быть лишних стилей или элементов, которые не требуются для достижения этих целей.
Вот код:
<form style="display: flex; flex-direction: column; flex-grow: 1; flex-basis: auto; width: max-content;">
<input type="text" placeholder="Текст" style="width: 100%;">
<div id="buttons" style="display: flex; flex-basis: auto; width: calc (2 * max-content);">
<button type="submit" style="white-space: nowrap; width: 50%;">Кнопка 1</button>
<button type="submit" style="white-space: nowrap; width: 50%;">Длинная Кнопка</button>
</div>
</form>
Что не так с этим кодом?
Почему элемент input не равен по ширине элементу с id=«buttons»?
как добиться одновременно ограниченного размером контента размера формы и кнопок одинаковой ширины?
