Using the flex:1 property does not automatically make my elements the same size and cover the entire height of the container

I have 2 containers and I want the elements in each container to fill the entire container. My goal is to make one container appear larger than the other.

https://i.stack.imgur.com/73yoR.jpg

Even though I am using the flex: 1 property, it does not seem to be working. What could I potentially be doing wrong?

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

.row{
  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">
    <div class="col-6 p-0 m-0 text-center">
        <div class="d-flex flex-column">
            <div class="d-flex borde_gris_b m-0">
                <div class="h-100 flex-center flex-column text-inherit w-100">
                    <h6 class="p-0 mx-0 mb-1 mt-0 font-weight-500">Valor Matrícula</h6>
                    <p class="card-text p-0 m-0 line-height-1"> $5,696,000 </p>
                </div>
            </div>
            <div class="d-flex  borde_gris_b m-0">
                <div class="h-100 flex-center flex-column text-inherit w-100">
                    <h6 class="p-0 mx-0 mb-1 mt-0 font-weight-500">Jornada</h6>
                    <p class="card-text p-0 m-0 line-height-1"> Diurna/Nocturna </p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 p-0 m-0 text-center" style="
    height: 100%;
">
        <div class="cardcustom d-flex flex-column" style="
    height: 100%;
">
            <div class="d-flex  borde_gris_b m-0">
                <div class="h-100 flex-center flex-column text-inherit w-100 p-3">
                    <h6 class="p-0 mx-0 mb-1 mt-0 font-weight-500">Contacto</h6>
                    <p class="card-text p-0 m-0 line-height-1"> fsdfs Valencia </p>
                    <div class="card-text" style="word-break: break-all;font-size: 13px;">
                        <span class="d-block"> fdsfs </span>

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

                <div class="h-100 flex-center flex-column text-inherit w-100">
                    <h6 class="p-0 mx-0 mb-1 mt-0 font-weight-500">Facultad</h6>
                    <p class="card-text p-0 m-0 line-height-1"> Chgfh </p>
                </div>
            </div>
            <div class="d-flex  borde_gris_b m-0">

                <div class="h-100 flex-center flex-column text-inherit 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>
    </div>
</div>

Note: I can have "n" number of elements

css

Answer №1

.custom-flex-container {
    height: 100%;
    align-items: stretch;
}

.custom-flex-container > .custom-flex-item {
    flex-grow: 1;
}

.custom-row {
    align-items: center;
}

It may be beneficial to create your own classes to style these elements. Personally, I prefer not using bootstrap, so I cannot advise on whether it is acceptable to overwrite these classes.

Answer №2

The demo showcases the following features:

  • Utilization of Bootstrap v. 4.3.1 stylesheet.

  • A simplified layout using recommended BS classes.

    • The structure follows 
      .container > .row > .col-md-6

  • Diverse tag types are used for improved semantics and readability, instead of just <div>.

    • The hierarchy includes 
      main > div > article > section
      .

  • .d-flex, .flex-column, and .flex-justify-center are selectively applied to each article.col-md-6 to stretch their content as needed.

  • The second section in each column is assigned .flex-grow-1 to extend it to the bottom of article.col-md-6.

Additionally:

  • To center all text, apply .text-center from Bootstrap to div.row

  • If you want the last section of every column to stretch dynamically and you're uncertain about the number of columns present, use the provided jQuery snippet inside a <script> tag (ensure that this tag appears after any <script src="..."> tags but before the closing </body> tag). 

    $('article.col-md-6 > section:last-of-type').addClass('flex-grow-1')

    Furthermore, if new sections are added post-loading, insert this line at the end of the function responsible for adding them.

Note: It's best viewed in Full Page Mode

.row {
  outline: 1px solid red;
}

section {
  border-bottom: 1px solid blue;
}

h5 {
  text-align: center
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

<main class='container'>
  <div class="row mt-4 mb-4">
  
    <article class="col-md-6 d-flex flex-column flex-justify-center">
      <section class="pt-1 mb-2">
        <h5>Heisenberg</h5>
        <blockquote class='blockquote'>
          <p>I AM the danger! A guy opens his door and gets shot and you think that of me? No. I am the one who knocks!</p>
        </blockquote>
      </section>
      <section class="pt-1 mb-2 flex-grow-1">
        <h5>Hank Schrader</h5>
        <blockquote class='blockquote'>
          <p>Lots of bodies apparently. Y'know even by Cartel standards. We'll know more when the buzzards leave the bones.</p>
        </blockquote>
      </section>
    </article>

    <article class="col-md-6 d-flex flex-column flex-justify-center">
      <section class="pt-1 mb-2">
        <h5>Mike Ehrmantraut</h5>
        <blockquote class='blockquote'>
          <p>I promise you this, either we're all going home or none of us are. Now settle down. On your feet.</p>
        </blockquote>
      </section>
      <section class="pt-1 mb-2">
        <h5>Saul Goodman</h5>
        <blockquote class='blockquote'>
          <p>Did you not plan for this contingency? I mean the Starship Enterprise had a self-destruct button. I'm just saying.</p>
        </blockquote>
      </section>
      <section class="pt-1 mb-2">
        <h5>Tuco Salamanca</h5>
        <blockquote class='blockquote'>
          <p>I beat the piss out of your mule boy, and then you walk in here, and you bring me more meth? That's a brilliant plan, ese. Brilliant.</p>
        </blockquote>
      </section>
    </article>
    
  </div>
</main>

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

Issue with CSS 3 gradient compatibility in Internet Explorer 8

My CSS3 gradient button is working perfectly on all browsers except for IE8. To make it work on IE8, I am utilizing CSS3 Pie. You can see the search button in action by visiting: Upon inspecting my console, I noticed an error on this line: PIE.htc, lin ...

csscss3pie

Customizing the color of a select dropdown in Bootstrap using CSS styling

I am having difficulty changing the default blue color for Bootstrap select dropdowns. Despite trying :hover and :active selectors on both option and select, I have not been successful in making the desired changes. Could anyone provide insight regarding ...

htmlcsstwitter-bootstrapdatatables

Is it possible to use CSS and HTML to rotate a cube and expand its sides?

I am attempting to rotate the cube and expand its faces. I have experimented with the following code: .wrapper{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .cube-wrap { width: 40px; height: 40px; ...

htmlcss

Immediate display of collapsed/toggle menu in a Bootstrap navbar

I have created a bootstrap responsive navigation menu that collapses into a box when the page is resized. It's a standard menu with bootstrap, but I'm facing an issue where the menu automatically appears when the page gets small instead of needin ...

htmlcsstwitter-bootstrapmenuresponsive-design

A difference in the way content is displayed on Firefox compared to Chrome, Edge, and Safari

Recently, I encountered an issue with a tool I had developed for generating printable images for Cross-Stitch work. The tool was originally designed to work on Firefox but is now only functioning properly on that browser. The problem at hand is whether th ...

javascripthtmlcssfirefox

Button press triggers the fadeIn function successfully, but the keypress event does not have the same effect

I'm currently facing an issue with two div elements on my webpage. I want only one of them to be visible at a time, depending on which key is pressed. If the 1 key is pressed, I want 'div1' to fadeIn (if it's not already visible) and fo ...

javascriptjqueryhtmlcss

Modify radio button colors upon selection with a variety of colors

Looking to create Yes/No buttons that start with a default state of null and change color when pressed - green for yes, red for no. Check out this example code: <label class="formheading">Apparatus group is correct</label> <fieldset data-r ...

javascriptjqueryhtmlcssjquery-mobile

The content of btn-id element in Angular is showing as undefined

I have a JavaScript file located at sample/scripts/sample.js and there are 8 HTML files in the directory sample/src/templates/. My goal is to select a button on one of the HTML files. When I tried using angular.elemnt(btn-id).html(), I received an 'un ...

javascriptcssangularjshtmlangularjs-directive

Wrapping header text in Vuetify's v-data-table

Struggling with wrapping the header text on a v-data-table component. I've tried applying styles, but only tbody elements are affected. The header (thead element) remains unchanged. Any suggestions on how to get custom styling for the header? For ins ...

cssvue.jsvuetify.js

Incorrect rendering on mobile screen width

I am facing an issue where my div does not display as 100% width in the mobile version. Below is the JSX code I am using: <div> <div expand="lg" className="login-header"> <h1>logo</h1> <h1&g ...

htmlcssmobileviewportmeta

Enhance <th> elements using CSS classes

I'm encountering some issues with HTML tables. The layout of my table is as follows: <table class="shop_table cart" cellspacing="0"> <thead> <tr> <th class="product-remove">&nbsp;</th> <th clas ...

htmlcss

Tips for updating the class of a button upon clicking it

I have a dilemma with my two buttons - one is green and the other has no background. I want them to change appearance when clicked, from green to one with a dashed border-bottom style. Below is the HTML code for these buttons: <div class="btns"> ...

javascriptjquerycssbutton

The width of a CSS border determines its height, not its width

When I try to use border-width: 100px; to set the horizontal width to 100px, it ends up setting the height to 100px instead. Any help would be greatly appreciated. .border-top-green { border-top: 1px solid #4C9962; border-width: 100px; padding-t ...

css

Unusual Display of Mantine Radio Button

I am currently using Mantine v7.0.0 in combination with Next.js v13.5.2 and Tailwind v3.3.3. In my setup, when I create <Radio /> elements, the svg of the element is appearing separately from the radio button instead of replacing it. This issue can b ...

cssnext.jstailwind-cssmantine

Acquiring the applicable CSS for a JavaFX 8 widget

While working on JavaFX styling with CSS, I encountered a challenge in understanding which CSS properties are directly affecting the appearance of a GUI widget. It reminded me of using Firefox web developer tools to inspect elements and view the specific s ...

javacssjavafx-8

Aligning the <div> list to the center of the webpage

Is there a way to center this list element on the page? It consists of three boxes that are all the same size, and I want them to always remain in the middle. body { width: 100%; } .boxes { display: block; margin: 0 auto; } .box-container ...

htmlcss

Issue with React Js: Text Sphere not appearing on page reload

Currently immersed in a react.js environment and eager to incorporate this impressive animated text sphere. Utilizing the TagCloud package for rendering assistance, however, encountered an issue where the text sphere would only display once and disappear u ...

javascripthtmlcssreactjstag-cloud

svg rect mistakenly appearing as a rounded polygon

I found a cool SVG pie chart on this codepen that I want to modify. The original chart is 50 x 50 and animated, but I want to make it 20 x 20. To resize the pie chart, I tried changing the width, height, radius, and center points in the code. I also adjus ...

csssvg

What is the best way to create a line break at the maximum width point?

I am currently working on a code that dynamically receives variables and concatenates them with an underscore: var text = product + "_" + someOtherInfo; After combining the variables, I need to display this text inside a div element. div { max-width ...

jquerycss

I am experiencing an issue where the close button image on tap is not closing on the first tap on

Why does the page close on the second tap instead of the first tap when using an iPhone? The image changes on tap but doesn't close as expected. $("#privacy-close-btn").mouseenter(function() { $("#privacy-close-btn").css("display", "none"); $(" ...

jqueryhtmlcssiphone