Я ищу создание div, который занимает столько ширины, сколько ему нужно, с высотой, установленной на высоту области просмотра. Проблема, с которой я сталкиваюсь, заключается в том, что если высота области просмотра уменьшается, ширина div не обновляется и содержимое переполняется по оси y.
Я пытался использовать flexbox для создания двух div, одногозанимают оставшуюся комнату, но это не заставляет другой div уменьшаться в ширине, чтобы слова не переносились.
Вот сценарий первой проблемы:
Содержимое Flexboxне обтекание
На изображении выше есть два элемента div, использующих следующий код:
.container {
display: flex;
}
.item-1 {
flex-grow: 0;
height: 100vh;
background-color:yellow;
}
.item-2 {
flex-grow: 1;
height: 100vh;
background-color:red;
}
Проблема заключается в том, что текст не оборачивается для уменьшения шириныПервая коробка как можно меньше. Вот желаемый результат:
Обтекание желаемого содержимого flexbox
Вторая проблема заключается в том, что при уменьшении высоты экрана содержимое переполняется вместо расширения div,как показано здесь:
Переполнение кода за пределами div
В идеале это два желаемых результата, которые я ищу:
Initialмакет
(без переполнения и минимально возможной ширины)
Исходный макет желаемого результата
Модифицированный макет
(без переполнения и ширина div увеличена для размещения содержимого в нем)
Модифицированный макет желаемого результата
Пока ничего яЯ пытался сработало, я спрашиваю о невозможном? Я ценю любую помощь, которая может быть оказана.