Почему overflow:auto не работает должным образом? ⇐ CSS
Почему overflow:auto не работает должным образом?
У меня есть HTML-код, в котором я не могу понять, как указать элементу .modal-message, чтобы он не превышал родительский элемент div .modal-container. Родительский элемент имеет динамический набор высоты (80%), и мне каким-то образом нужно заставить его дочернего элемента вписаться в него. Я не хочу добавлять overflow: auto к родительскому элементу, я хочу, чтобы дочерний элемент можно было прокручивать.
.content { ширина: 600 пикселей; маржа: 0 авто; фон: #ддд; } .wrapper { отступ: 1рем; положение: относительное; } .модальный { дисплей: гибкий; позиция: абсолютная; верх: 0; слева: 0; ширина: 100%; высота: 100%; выровнять-элементы: по центру; оправдание-содержание: центр; } .modal-контейнер { максимальная ширина: 80%; максимальная высота: 80%; /* переполнение: авто; */ /* этого я не хочу делать */ } .modal-header { заполнение: .1rem 1rem; фон: #ccc; } .modal-сообщение { /* максимальная высота: 150 пикселей; */ /* этого я не могу сделать */ отступ: 1рем; фон: #f1f1f1; переполнение: авто; Документ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque perferendis aut dolores quia soluta sequi eos, ad reiciendis ex modi voluptate dolore officiis sint est Laboriosam Aperiam Exercitationem ipsam consequuntur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque perferendis aut dolores quia soluta sequi eos, ad reiciendis ex modi voluptate dolore officiis sint est Laboriosam Aperiam Exercitationem ipsam consequuntur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque perferendis aut dolores quia soluta sequi eos, ad reiciendis ex modi voluptate dolore officiis sint est Laboriosam Aperiam Exercitationem ipsam consequuntur.
Очень важный заголовок
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque perferendis aut dolores quia soluta sequi eos, ad reiciendis ex modi voluptate dolore officiis sint est Laboriosam Aperiam Exercitationem ipsam consequuntur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque perferendis aut dolores quia soluta sequi eos, ad reiciendis ex modi voluptate dolore officiis sint est Laboriosam Aperiam Exercitationem ipsam consequuntur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque perferendis aut dolores quia soluta sequi eos, ad reiciendis ex modi voluptate dolore officiis sint est Laboriosam Aperiam Exercitationem ipsam consequuntur.
Кто-нибудь знает, как этого добиться?
У меня есть HTML-код, в котором я не могу понять, как указать элементу .modal-message, чтобы он не превышал родительский элемент div .modal-container. Родительский элемент имеет динамический набор высоты (80%), и мне каким-то образом нужно заставить его дочернего элемента вписаться в него. Я не хочу добавлять overflow: auto к родительскому элементу, я хочу, чтобы дочерний элемент можно было прокручивать.
.content { ширина: 600 пикселей; маржа: 0 авто; фон: #ддд; } .wrapper { отступ: 1рем; положение: относительное; } .модальный { дисплей: гибкий; позиция: абсолютная; верх: 0; слева: 0; ширина: 100%; высота: 100%; выровнять-элементы: по центру; оправдание-содержание: центр; } .modal-контейнер { максимальная ширина: 80%; максимальная высота: 80%; /* переполнение: авто; */ /* этого я не хочу делать */ } .modal-header { заполнение: .1rem 1rem; фон: #ccc; } .modal-сообщение { /* максимальная высота: 150 пикселей; */ /* этого я не могу сделать */ отступ: 1рем; фон: #f1f1f1; переполнение: авто; Документ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque perferendis aut dolores quia soluta sequi eos, ad reiciendis ex modi voluptate dolore officiis sint est Laboriosam Aperiam Exercitationem ipsam consequuntur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque perferendis aut dolores quia soluta sequi eos, ad reiciendis ex modi voluptate dolore officiis sint est Laboriosam Aperiam Exercitationem ipsam consequuntur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque perferendis aut dolores quia soluta sequi eos, ad reiciendis ex modi voluptate dolore officiis sint est Laboriosam Aperiam Exercitationem ipsam consequuntur.
Очень важный заголовок
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque perferendis aut dolores quia soluta sequi eos, ad reiciendis ex modi voluptate dolore officiis sint est Laboriosam Aperiam Exercitationem ipsam consequuntur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque perferendis aut dolores quia soluta sequi eos, ad reiciendis ex modi voluptate dolore officiis sint est Laboriosam Aperiam Exercitationem ipsam consequuntur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque perferendis aut dolores quia soluta sequi eos, ad reiciendis ex modi voluptate dolore officiis sint est Laboriosam Aperiam Exercitationem ipsam consequuntur.
Кто-нибудь знает, как этого добиться?
-
- Похожие темы
- Ответы
- Просмотры
- Последнее сообщение
-
-
TailwindCSS - «overflow-auto» работает, когда контейнер имеет «h-1/2», но не «h-full»?
Anonymous » » в форуме CSS - 0 Ответы
- 22 Просмотры
-
Последнее сообщение Anonymous
-