What is the best way to have my items fill the entire column space using flexbox?

Having 2 containers and wanting them to have the same height has been a challenge. I've been experimenting with flexbox and the 

flex-direction: column (flex-column)
property, but I can't seem to get each element to divide the available container height properly.

https://i.sstatic.net/uXT0A.jpg

.borde_gris_b{
  border-bottom:1px solid blue;
}
<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 class="row p-0 m-0">
            <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 -->

I'm striving to achieve uniform height for both elements, and want the elements in each container to be distributed evenly based on the available container height.

css

Answer №1

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

.red-border{
border:1px solid red;
}
<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 red-border">
        <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 ">Duration</h6>
                <p class="card-text p-0 m-0 "> 10 academic terms </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 ">Number of Credits</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 ">Training Modality</h6>
                <p class="card-text p-0 m-0 "> Onsite </p>
            </div>
        </div>
    </div>
    
    <!-- second container-->
    
    <div class="col-12 col-sm-6 col-md-6 text-center col-lg-6 col-xl-6 p-0 m-0 red-border">
                <div class="d-flex  borde_gris_b m-0" >
                    <div class="h-100 flex-center flex-column  w-100">
                        <h6 class="p-0 mb-1 ">Scholarships</h6>
              
                        <div class="d-flex justify-content-center flex-row">
                            <span class="mr-3"> Good Scholarship </span>           
                                <p class="mb-0"> $2,107,000 </p>
                            
                        </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 ">Tuition Fee</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 ">Schedule</h6>
                        <p class="card-text p-0 m-0 "> Day/Night </p>
                    </div>
                </div>
            </div>

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

Answer №2

I've come up with a solution that might be beneficial for you. I assigned the class .container-2 to the second container and set it up as a flexbox.

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

.container-2 {
    display: flex;
    align-self: stretch;
    align-items: stretch;
    flex-direction: column;
    justify-content: flex-end;
}
<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="container-2 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">
            <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 -->

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to convert cursor to jpg format

I am facing an issue where I have a jpg file stored in the same folder as my styles.css, and I want to change the cursor on a webpage to this particular jpg file. Despite my efforts, it seems like the cursor is not changing as expected. Currently, I am us ...

htmlcss

Using jQuery to extract the HTML content of an element while removing the style attribute

Is there a way to retrieve the raw HTML of an element, or obtain the HTML without the "style" attribute applied? Let's consider the example below: <div class="outer"> <div class="inner"> some text </div> </div> A ...

javascriptjqueryhtmlcssjquery-animate

Alignment of a div at the bottom inside a jumbotron using Bootstrap 4

Searching for answers on how to vertically align a div within a jumbotron, I have come across plenty of solutions for middle alignment but none for bottom alignment. <section id="profileHero"> <div class="container"> <d ...

csstwitter-bootstrapbootstrap-4

Is there a way to get rid of the "bouncing effect" on my button while using an inline floating-label text input?

When an input with a floating label (Bootstrap 5) is inline with other elements, the elements may appear to jump up and down depending on the position of the floating label. https://i.sstatic.net/kDxBo.gif <link href="https://cdn.jsdelivr.net/npm/bo ...

htmlcsstwitter-bootstrapbootstrap-5

I am interested in designing a dynamic wave-themed background for a menu

I am looking to create a menu background that ripples like a wave when hovered over. Check out the first example here: https://i.sstatic.net/LoOWM.png I want to achieve the same effect. Can anyone help me with how I can do this? <ul> <li>likk ...

javascripthtmlcsssvgbootstrap-4

What is the best way to make IE 10 display a pointer instead of an I-bar for a select list?

Is there a way to make IE 10 display a pointer instead of an I-bar when selecting from a list? Despite trying various methods found in similar questions, I have been unable to resolve this issue. The cursor: pointer property works as expected on other br ...

javascripthtmlcss

What is the best way to transform the words in my JavaScript array into clickable links?

I am working on a search bar that autofills words and I want to turn those autofilled words into clickable links. For example, if I type "locations" in the search bar, I want it to autofill the word "locations" and turn it into a link that directs me to pa ...

javascripthtmlcss

How can I position two divs side by side within an Appbar?

I would like the entire Container to be in a single row, with the Typography centered as it already is, and the toggle-container to float to the right <AppBar className={styles.AppBar}> <Toolbar> <Container> ...

javascriptcssreactjsflexboxmaterial-ui

The SVG image does not display in browsers other than Internet Explorer (IE)

I am encountering an issue with adding a menu toggle image in SVG format to my HTML. Unfortunately, the image is not displaying as expected. Here are screenshots for comparison between Explorer and Chrome: https://i.stack.imgur.com/74sqh.png https://i. ...

javascripthtmlcsssvg

Swipe up to illuminate div when validation fails

My JSP page includes a form with a div that displays error messages when validation fails. The errors are generated server-side, displayed inside the div using struts property tag. However, the issue I'm facing is that the submit button is located fa ...

jquerycssjsphtmlscroll

table rows are styled with hover effects and alternating colors using CSS

Styles for even and odd table rows are set, but hovering over the table rows is not working. Test it out here: http://jsfiddle.net/w7brN/ CSS style : #table_even tr:hover { background-color:#fffbae!important; } /* hover effect */ #table_even tr:nth-ch ...

htmlcss

Guide on stacking a transformed 3D div on top of a masked layer with higher Z-index without success

I am attempting to stack a green div on top of a blue div using CSS transformations. The blue div acts as a masked layer, while the green div is a dialog that should appear on top. I have tried adjusting the z-index property, but the blue div always ends ...

htmlcssz-indextransform

The height of each Bootstrap column is equal to the height of its corresponding

I am trying to prevent the column height from being equal to the row height in Bootstrap. Here is my code snippet: <div class="row justify-content-center text-center"> <div class="col-sm-3"></div> <div class="col-sm-9"></d ...

htmlcsstwitter-bootstrap

What is the best way to enhance a tool-tip with images or legends?

Currently, I have implemented a tool-tip feature which works for a text box. However, the issue is that users are unaware of the presence of the tool-tip for the text box until they hover over it. My question is, how can I make it more obvious to users t ...

javascriptjqueryhtmlcsstwitter-bootstrap

How can I align the CSS Horizontal Menu directly under the parent menu instead of its current incorrect x-position?

I am working on creating a horizontal drop-down menu using CSS. However, I'm facing an issue where the submenu either appears all the way to the left of the website (when I use position: absolute) or directly to the left of the menu (when set to posit ...

cssmenupositioning

Update the background image URL by setting it as the value of an input field

There are three elements in play here: an input field, a span element, and a div with a background image property. <span>Go</span><input id="ImageUrl"/> <div id="Image"></div> I am working on a script where when a user ente ...

jquerycssclickattr

What is the best way to ensure that the buttons remain in place once they have been clicked to reveal a drop-down menu?

Is there a way to keep 3 buttons inline and prevent them from moving when clicked to open a submenu? Changing their positions results in them stacking on top of each other. Any help or suggestions would be greatly appreciated, thank you! Here is the code ...

javascriptjqueryhtmlcss

Create a visually appealing layout with two images positioned side by side using Bootstrap

Currently, I am working with a code snippet that displays two images, each approximately 350px wide. These images are being shown in a sidebar that is set at 400px wide on desktop and tablet screens (col-lg, col-md, col-sm), but expands to 100% width on a ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Adjusting ThreeJS Canvas to Utilize Entire Space

Here is a simple example I created for demonstration: http://jsfiddle.net/8nbpehj3/37/ <html> <body> <div class='wrapper'> <div class='nav'> <div class='button'>Button</div ...

cssthree.js

Guide to vertically aligning text in an overlay using CSS within Angular 2

I currently have an overlay on my page that displays a spinner (an Angular material component) and accompanying text. This overlay covers the entire page and prevents clicking on elements below it. The spinner is positioned in the center of the page, and ...

cssangularoverlay