How do I control the ratio of width of the flex items?

Question

I want to create a flex container that holds two elements. The first element will be placed on the left-side of the flex-container taking up a percentage of the width. I then want to place a second element that will take up the remaining space on the right side of the container. I Have made several attempts to solve this problem. The CSS property 'min-width' seems to be the only CSS property that affects the flex containers layout in a way the is useful for all intended purposes, however; when I use CSS property 'min-width' the flex-container elements loose there alignment. Could a front-end developer, or CSS expert kindly let me know how to set the ratio of the flex elements. Thank You.

My HTML:

<div class="container-body container">
    <div class="container iframe-container">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/LXb3EKWsInQ" frameborder="1" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>

    <div class="container content">
        <h2 class="section-title section-title-ourworks" style="text-align:left">
            INTRODUCTION ABOUT OUR WORK
        </h2>
        <p class="content-body">
        </br>
            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.
        </p>
    </div>
</div>

My 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%;
    }

The output will look like this:

I want .content to take up the remaining space on the screen. I'm not able to do it. Please help me with this.

Does this answer your question? [Make a div fill the height of the remaining screen space](https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space) — JΛYDΞV, Aug 31 '20 at 15:42
https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space/24979148#24979148 — JΛYDΞV, Aug 31 '20 at 15:42

score 0 · Answer 1 · answered Aug 31 '20 at 15:21

you are right to use flex-grow, just not using in the right places:

.container-body {
  margin-left: 0;
  display: flex;
  justify-content: space-evenly;
  width: 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;
  flex: 1;
}

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

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

now they will be 50% 50%, You can find more details here:

score 0 · Answer 2 · answered Aug 31 '20 at 15:24

.container { 
  color: white;
  width: 500px;
  height: 200px;
  display: flex;
}

.iframe { 
  width: 200px;
  height: 200px;
  background-color: green;
}

.content { 
  /* use flex-grow on flex items to make it grow and obtain the available space */
  flex-grow: 1;
  height: 200px;
  background-color: red;
}

<div class="container">
  <div class="iframe">
    the iframe
  </div>
  <div class="content">
    the content
  </div>
</div>

How do I control the ratio of width of the flex items?

2 Answers2