Как контролировать соотношение ширины гибких элементов? ⇐ CSS

[Anonymous]

Я хочу создать гибкий контейнер, содержащий два элемента. Первый элемент будет размещен в левой части гибкого контейнера, занимая определенный процент ширины. Затем я хочу разместить второй элемент, который займет оставшееся пространство в правой части контейнера. Я предпринял несколько попыток решить эту проблему. Однако свойство CSS min-width является единственным свойством CSS, которое влияет на макет гибких контейнеров таким образом, что оно полезно для всех намеченных целей; когда я использую свойство CSS «min-width», элементы гибкого контейнера теряют выравнивание. Может ли внешний разработчик или эксперт по CSS сообщить мне, как установить соотношение гибких элементов. Спасибо.
Мой HTML:

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

https://www.youtube.com/embed/LXb3EKWsInQ


INTRODUCTION ABOUT OUR WORK



Pursuing our products, services and ideas is our main goal as a startup. We’re a group of individuals who believe in coming up with innovative ideas and concepts that are original and unique inherently. Our belief system provides us with an overarching vision for the future based on these beliefs which informs where we currently stand today. Through this philosophy, we strive to innovate, creating something truly new every day using only principles from all parts into its final form.

Мой CSS:

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

.container-body {
margin-left: 0;
display: flex;
justify-content:space-evenly;
width: auto;
flex: 1 auto;
}

.container.content {
margin: 0;
margin-left: 2rem;
margin-right: 2rem;
border: 1px dotted red;
display: inline-block;
position: relative;
width: 100%;
}

.iframe-container {
margin-left: 10rem;
margin-top: 0;
right: 10rem;
}

.section-title-ourworks {
margin: 0;
padding-top: 2rem;
width: 100%;
}

.content-body {
color: white;
text-align: justify;
width: 100%;
}

Вывод будет выглядеть следующим образом:


Я хочу, чтобы .content занимал оставшееся место на экране. Я не могу этого сделать. Пожалуйста, помогите мне с этим.

Подробнее здесь: https://stackoverflow.com/questions/636 ... flex-items