How to Make The Elements Cover 100% of The Space Available in a Container Using Flexbox

How to make the elements cover 100% of the space available in a container using Flexbox?

Problem #1

I need both elements to have the same height

The flexbox does not have height: 100% and does, therefore, not fill the full height of its parent container (which would be the same as the left column).

So let's add this: Since you are using bootstrap already just add the h-100 class to the marked element.

<!-- two container-->

<div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 p-0 m-0 ">
  <div class="row p-0 m-0"> <!--=========THIS CONTAINER===========-->
    <div class="col-12 col-sm-12 col-md-12 col-lg-6 p-0 m-0  text-center p-0  d-flex flex-column">
      <div class="d-flex  borde_gris_b m-0">

        <div class="h-100 flex-center flex-column  w-100">
          <h6 class="p-0 mx-0 ">Becas</h6>
          <p class="card-text p-0 m-0 "></p>
          <div class="d-flex mb-1">
            <div class="mr-3"> Beca Bien </div>
            <div>

              <p> $2,107,000 </p>
            </div>
          </div>
        </div>
      </div>

... more code
... more code
... more code

Problem #2

the elements present in each container are distributed by the available height of the container.

For this you want to use the flex property, which is well described on w3schools.com (click me). Also notice the description of their first exmaple:

Let all the flexible items be the same length, regardless of its content.

This is exactly what we want! So let's add this as well. Since you only used bootstrap and no custom classes it would be a nightmare to specify the path so let's just add a custom ID for it instead and add the CSS.

#second > div > div {
  flex: 1;
}

At the end this is the final result:

.borde_gris_b {
  border-bottom: 1px solid blue;
}

#second>div>div {
  flex: 1;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row p-0 m-0 m-auto justify-content-center">
  <!-- first container-->
  <div class="col-12 col-sm-6  col-md-6 col-lg-6  col-xl-4 p-0 m-0  text-center p-0  d-flex flex-column" style="border:1px solid red;">
    <div class="d-flex  borde_gris_b m-0">
      <div class="h-100 flex-center flex-column  w-100">
        <h6 class="p-0 mx-0 mb-1 mt-0 ">SNIES</h6>
        <p class="card-text p-0 m-0 "></p>
        <div class="card-text">12967</div>
      </div>
    </div>
    <div class="d-flex  borde_gris_b m-0">

      <div class="h-100 flex-center flex-column  w-100">
        <h6 class="p-0 mx-0 mb-1 mt-0 ">Duración</h6>
        <p class="card-text p-0 m-0 "> 10 periodos academicos </p>
      </div>
    </div>

    <div class="d-flex  borde_gris_b m-0">

      <div class="h-100 flex-center flex-column  w-100">
        <h6 class="p-0 mx-0 mb-1 mt-0 ">Número de Créditos</h6>
        <p class="card-text p-0 m-0 "> 170 </p>
      </div>
    </div>
    <div class="d-flex  borde_gris_b m-0">

      <div class="h-100 flex-center flex-column  w-100">
        <h6 class="p-0 mx-0 mb-1 mt-0 ">Modalidad de Formación</h6>
        <p class="card-text p-0 m-0 "> Presencial </p>
      </div>
    </div>
  </div>

  <!-- two container-->

  <div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 p-0 m-0 ">
    <div id="second" class="row p-0 m-0 h-100">
      <div class="col-12 col-sm-12 col-md-12 col-lg-6 p-0 m-0  text-center p-0  d-flex flex-column">
        <div class="d-flex  borde_gris_b m-0">

          <div class="h-100 flex-center flex-column  w-100">
            <h6 class="p-0 mx-0 ">Becas</h6>
            <p class="card-text p-0 m-0 "></p>
            <div class="d-flex mb-1">
              <div class="mr-3"> Beca Bien </div>
              <div>

                <p> $2,107,000 </p>
              </div>
            </div>
          </div>
        </div>
        <div class="d-flex  borde_gris_b m-0">

          <div class="h-100 flex-center flex-column  w-100">
            <h6 class="p-0 mx-0 mb-1 mt-0 ">Valor Matrícula</h6>
            <p class="card-text p-0 m-0 "> $5,696,000 </p>
          </div>
        </div>

        <div class="d-flex  borde_gris_b m-0">

          <div class="h-100 flex-center flex-column  w-100">
            <h6 class="p-0 mx-0 mb-1 mt-0 ">Jornada</h6>
            <p class="card-text p-0 m-0 "> Diurna/Nocturna </p>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>
<!-- end row -->

Fill the remaining height or width in a flex container

Use the flex-grow property to make a flex item consume free space on the main axis.

This property will expand the item as much as possible, adjusting the length to dynamic environments, such as screen re-sizing or the addition / removal of other items.

A common example is flex-grow: 1 or, using the shorthand property, flex: 1.

Hence, instead of width: 96% on your div, use flex: 1.

You wrote:

So at the moment, it's set to 96% which looks OK until you really squash the screen - then the right hand div gets a bit starved of the space it needs.

The squashing of the fixed-width div is related to another flex property: flex-shrink

By default, flex items are set to flex-shrink: 1 which enables them to shrink in order to prevent overflow of the container.

To disable this feature use flex-shrink: 0.

For more details see The flex-shrink factor section in the answer here:

What are the differences between flex-basis and width?

Learn more about flex alignment along the main axis here:

In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Learn more about flex alignment along the cross axis here:

How does flex-wrap work with align-self, align-items and align-content?

Flexbox: how to get divs to fill up 100% of the container width without wrapping?

To prevent the flex items from shrinking, set the flex shrink factor to 0:

The flex shrink factor determines how much the flex item will
shrink relative to the rest of the flex items in the flex
container when negative free space is distributed. When omitted, it is
set to 1.

.boxcontainer .box {
  flex-shrink: 0;
}

* {  box-sizing: border-box;}.wrapper {  width: 200px;  background-color: #EEEEEE;  border: 2px solid #DDDDDD;  padding: 1rem;}.boxcontainer {  position: relative;  left: 0;  border: 2px solid #BDC3C7;  transition: all 0.4s ease;  display: flex;}.boxcontainer .box {  width: 100%;  padding: 1rem;  flex-shrink: 0;}.boxcontainer .box:first-child {  background-color: #F47983;}.boxcontainer .box:nth-child(2) {  background-color: #FABCC1;}#slidetrigger:checked ~ .wrapper .boxcontainer {  left: -100%;}#overflowtrigger:checked ~ .wrapper {  overflow: hidden;}

<input type="checkbox" id="overflowtrigger" /><label for="overflowtrigger">Hide overflow</label><br /><input type="checkbox" id="slidetrigger" /><label for="slidetrigger">Slide!</label><div class="wrapper">  <div class="boxcontainer">    <div class="box">      First bunch of content.    </div>    <div class="box">      Second load  of content.    </div>  </div></div>

How can I make Flexbox children 100% height of their parent?

Use `align-items: stretch`

Similar to David Storey's answer, my workaround is:

.flex-2 {
    display: flex;
    align-items: stretch;
}

Note that height: 100% should be removed from the child component (see comments).

Alternatively to align-items, you can use align-self just on the .flex-2-child item you want stretched.

Better way to set distance between flexbox items

Flexbox doesn't have collapsing margins.
Flexbox doesn't have anything akin to border-spacing for tables (edit: CSS property gap fulfills this role in newer browsers, Can I use)

Therefore achieving what you are asking for is a bit more difficult.

In my experience, the "cleanest" way that doesn't use :first-child/:last-child and works without any modification on flex-wrap:wrap is to set padding:5px on the container and margin:5px on the children. That will produce a 10px gap between each child and between each child and their parent.

Demo

.upper {
  margin: 30px;
  display: flex;
  flex-direction: row;
  width: 300px;
  height: 80px;
  border: 1px red solid;

  padding: 5px; /* this */
}

.upper > div {
  flex: 1 1 auto;
  border: 1px red solid;
  text-align: center;

  margin: 5px;  /* and that, will result in a 10px gap */
}

.upper.mc /* multicol test */ {
  flex-direction: column;
  flex-wrap: wrap;
  width: 200px;
  height: 200px;
}

<div class="upper">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

<div class="upper mc">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

How can I make my flexbox layout take 100% vertical space?

You should set height of html, body, .wrapper to 100% (in order to inherit full height) and then just set a flex value greater than 1 to .row3 and not on the others.

.wrapper, html, body {
    height: 100%;
    margin: 0;
}
.wrapper {
    display: flex;
    flex-direction: column;
}
#row1 {
    background-color: red;
}
#row2 {
    background-color: blue;
}
#row3 {
    background-color: green;
    flex:2;
    display: flex;
}
#col1 {
    background-color: yellow;
    flex: 0 0 240px;
    min-height: 100%;/* chrome needed it a question time , not anymore */
}
#col2 {
    background-color: orange;
    flex: 1 1;
    min-height: 100%;/* chrome needed it a question time , not anymore */
}
#col3 {
    background-color: purple;
    flex: 0 0 240px;
    min-height: 100%;/* chrome needed it a question time , not anymore */
}

<div class="wrapper">
    <div id="row1">this is the header</div>
    <div id="row2">this is the second line</div>
    <div id="row3">
        <div id="col1">col1</div>
        <div id="col2">col2</div>
        <div id="col3">col3</div>
    </div>
</div>

Force flex item to span full row width

When you want a flex item to occupy an entire row, set it to width: 100% or flex-basis: 100%, and enable wrap on the container.

The item now consumes all available space. Siblings are forced on to other rows.

.parent {
  display: flex;
  flex-wrap: wrap;
}

#range, #text {
  flex: 1;
}

.error {
  flex: 0 0 100%; /* flex-grow, flex-shrink, flex-basis */
  border: 1px dashed black;
}

<div class="parent">
  <input type="range" id="range">
  <input type="text" id="text">
  <label class="error">Error message (takes full width)</label>
</div>

How to Make The Elements Cover 100% of The Space Available in a Container Using Flexbox