@WebNerd
It's time to hunt

Как сделать так, чтобы контент не растягивал блок за экран?

Чтож, приветствую всех господ фронт-енд разработчиков и других. Сразу замечу, я хочу все попробовать реализовать без JS, потому просьба отвечать только на счет верстки. Итак, вопросов несколько:
1. Есть такой вот вид проекта.
image.png

Задача была в том, чтобы центрировать блок. Но вот в чем дилемма: если переполнять эту секцию списками вопросов, то все рушится. Показываю:
image.png

Из за центровки элемента, оно всегда растягивается равномерно - и вверх и вниз. И если нижняя часть показывается, т.к появлсяется скролл у документа, то верхняя просто уходит за верхнюю границу. Это, конечно, проблема. Ведь хотелось бы, чтобы от центра оно всегда тянулось только вниз. Реализуемо ли это? Я решил задачу следующим образом: просто добавил wrapper-у max-height 400px и overflow-y: auto. Но я до ужаса не люблю скроллы, потому есть ли какое то альтернативное решение без JS?

Ну и второй вопрос:
Когда наводишь на вопросы(h3), тег p, в котором лежит основной текст, с помощь hover задается max-height 200px/ И так же задан overflow-y: auto, чтобы был скрол при переполнении. По другому здесь так же не решается, т.к при переполнении мой блок едет не только вниз, но и вверх.

image.png
  • Вопрос задан
  • 198 просмотров
Решения вопроса 1
@WebNerd Автор вопроса
It's time to hunt
Сам нашел ответ. Position absolute вырывал из потока белый блок, потому при переполнении и центровки, он вылетал за границу верхнего окна. Решилась проблема легко. Заместо устаревшего absolute, использовать на родителя display: flex, а на потомка margin: auto. Возможно, можно и сделать с помощью justify content, align items
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы