В процессе создания сервиса TelegramID, который позволяет в один клик узнать id группы или канала в Telegram столкнулся с проблемой: поле input (куда нужно вводить адрес канала или группы) выходил за границы таблицы и не разу не совпадал с горизонтальными размерами кнопки. Выглядело это следующим образом:
Причем самым неприятным было то, что стили:
.input_name_field, .get_id_button { /* width: 100%; */ background-color: #ffffff; border-radius: 5px; border: 1px solid #ffffff; font-size: small; box-shadow: 1px 1px 10px rgb(173, 173, 173);
прекрасно работали в Edge, но совершенно не работали в Chrome.
Стал разбираться с этой проблемой, и оказалось, что я не первый человек с ней столкнувшийся. Решение нашлось — очень простое, кстати:
1. В родительском элементе (форма) делаем: display: flex
2. Добавляем туда же: flex-direction: column
3. В стилях поля input и кнопки убираем: width: 100%
4. Радуемся:
Как всегда — в случае возникновения вопросов пишите на почту или в Telegram.