Как поступить в ситуации когда объекты вылазят за пределы контейнера?

Question

[gazes12]

В какой-то момент получается это:
Скриншот кода удалён модератором.

Как лучше всего поступить в такой ситуации? Как правильно адаптировать такие формы?

Comments

[Ankhena]

Как лучше всего поступить в такой ситуации?

Ох..
Даже не знаю, с чего начать..
Пусть так:

1. У вас есть div create-comment__body (сложно сказать зачем он там, но есть). Он флекс.
Дальше вы его дочерним create-comment__item (в данной ситуации они пока тоже лишние (пока нет лейблов), а если будут, то это p, а не div) говорите, что они должны быть 48% от родителя. Пока логика вроде есть.
Но потом вы говорите инпутам, что они должны быть 90% от тех 48%.

Так вот, начать имеет смысл с ответа на вопрос, зачем вы написали про 48%, а потом про 90%.

2. Возвращаемся к 90%. Инпуты 90% от родителя. Но потом вы им задает отступы по 30+30 но уже пикселей.
Вопрос: при каких обстоятельствах 90% + 60px будут помещаться в родителя, а в каких нет.
Т.е. нужно либо использовать calc либо вспомнить о box-sizing border-box, чтобы отступы входили в ширину, а не плюсовались.

p.s.
3. Кнопки удобнее делать тегами button. Инпутами их делали, когда тег button ещё не родился.

4. Для доступности, у каждого поля формы должен быть label, причем желательно связанный со своим полем через id и for, даже если поле вложено в лейбл. Если нет видимой подписи в макете, то лейбл скрывают доступным способом через паттерн visually-hidden (гуглится).

[Модератор]

См.п.3.8

[Ankhena]

Модератор, там же было видно что у него получается, чтобы сразу было видно проблему, а не ради кода.

[Модератор]

Ankhena, и да и нет. Скриншот того, «что получается», не должен включать весь экран с кодом, терминалом и прочим. Всю структурированную текстовую информацию следует размещать согласно п.3.8 регламента.

Обсуждения действий модератора следует осуществлять согласно п.8.1, 8.2 регламента.

[gazes12]

Ankhena, Cпасибо!