Гибкий блок с двумя элементами div (1 изображение и 1 текст), привязанными к экрану, а не к элементу контейнера ⇐ CSS

[Anonymous]

У меня есть информационное окно с данными о фильмах/телешоу, и я думаю, что это довольно просто. Но я боролся с этим флексбоксом (слишком много) часов. Я пробовал бесчисленное количество решений здесь и в других местах, но ни одно из них не сработало.
Коробка проста: блок div изображения (слева) и текстовый блок div (справа), заключенные в контейнер.
Я столкнулся с тремя проблемами:

• Когда (правый) текстовый div заполняется текстом, он затем расширяется. опускается ниже image div. Текст начинает переноситься только тогда, когда он находится на отдельной строке. (Я ожидаю, что он будет перенесен без удаления элемента div ниже.)
• Присвоение текстовому div ширины (например, 70%) решает проблему, но затем переходит на следующую строку, как только она становится меньше этой ширины (когда я сжимаю окно браузера).
• На экранах мобильных устройств только текстовый элемент div (который находится под изображением на мобильных устройствах). занимает назначенную мной ширину (например: 70%).

Я хочу, чтобы текстовый элемент div занимал оставшуюся пробел в одной строке, как я и предполагал. Я думал, что два дочерних элемента div связаны с элементом контейнера, а не с полным окном.
Коробка проста. На примере Fallout:

Код: Выделить всё

div.tv-wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
div.tv-image {
float: left;
width: 300px;
}
div.tv-details {
width: 70%;
float: left;
}
dl {
display: grid;
grid-template-columns: 1fr 2fr;
}
dt {
grid-column-start: 1;
}
dd {
grid-column-start: 2;
}

Код: Выделить всё

[img]https://picsum.photos/200/300[/img]

Fallout (2024)

Network: Prime Video
Number of Seasons: 1
Status: Returning Series
Genre: Sci-Fi & Fantasy, Action & Adventure, Mystery
Creator: Geneva Robertson-Dworet, Graham Wagner
Main Cast: Ella Purnell, Aaron Moten, Moisés Arias, Walton Goggins
Overview: The story of haves and have-nots in a world in which there’s almost nothing left to have. 200 years after the apocalypse, the gentle denizens of luxury fallout shelters are forced to return to the irradiated hellscape their ancestors left behind — and are shocked to discover an incredibly complex, gleefully weird, and highly violent universe waiting for them.

Я перепробовал каждую комбинацию гибких оберток, гибких строк, выравнивания- содержимое, плавающие элементы и т. д.
Я хочу, чтобы информационное окно реагировало на размер экрана, и я хочу, чтобы оно занимало весь экран. Я хочу, чтобы (левый) div изображения занимал 1/3 div-обертки, а (правый) текстовый div - 2/3 div-обертки. Я хочу, чтобы текстовый элемент div опускался ниже элемента изображения, когда экран становится меньше.
И я старался сделать CSS максимально простым, пока не разобрался с этим.
(Цвета фона на прикрепленном изображении предназначены только для устранения неполадок.)





Подробнее здесь: https://stackoverflow.com/questions/785 ... -container