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

The CSS slideshow is malfunctioning when displaying images retrieved from the database

I received a complimentary website layout to enhance my PHP skills. The website originally had slides on the index page, sourced directly from my computer when it was in index.html. However, now I have modified it to retrieve images from a database. Instea ...

phphtmlcssfunctionslide

Modify the CSS formatting of a specific element with its designated ID

On my HTML page, I have an element that looks like this: <label id="lb">Label1</label> In my corresponding CSS file, I have defined the following style for it: #lb{ width:100px; } I want to override this style. What would be the most effect ...

htmlcss

Unusual scroll bar movements when using jQuery validation

When I click the Add Dependent link button, I wanted the scroll bar to automatically scroll to the bottom, and it does just that. However, there is a small issue after the postback where the text "Please fix the following problems:" briefly appears, even t ...

c#javascriptasp.netcssjquery-validate

Tips for positioning an advertisement at the center of a full-screen HTML5 game

I am struggling to find a way to perfectly center my advertisement in a fullscreen HTML5 game. The game automatically expands to fullscreen when played, and I want the advertisement to always be positioned in the center, regardless of whether the game is b ...

javascriptcsshtml

What is the functionality of 'min-height: 100vh' when child elements stack due to a small width?

In a parent element, I have two child elements: <div id="registration"> <div id="left-panel"></div> <div id="right-panel"></div> </div> The styling is as follows: #registration{ @include l { flex-dire ...

htmlcss

Having trouble getting a resizable DIV inside a 100% height DIV with margin to work properly. Any tips or assistance would be greatly

I've encountered a common issue that is slightly different from others I've come across. Despite my best efforts, I have been unable to find a solution on my own. If anyone could offer me some guidance on this, I would greatly appreciate it. The ...

csshtmlheight

Discrepancy in Bootstrap Navbar Brand and Links color appearance when attempting to change font and color across entire navbar

As a newcomer to CSS, I am facing an issue with my navbar. I want both the navbar brand and navbar links to be the same size and color. However, when I try to change the font and color of the entire navbar, only the font changes and the color remains incon ...

htmlcssbootstrap-4

Tips for positioning an element at the bottom of a flexible container with variable size

How can I ensure that the Author element in this jsfiddle is aligned properly between the card elements? I am struggling to adjust the size of the details container to match the variable sizes of other elements in the same row. The aim is to have the Auth ...

cssflexbox

What is the best way to flip the direction of the text input for a Calculator?

I am currently working on creating a basic calculator from scratch using HTML, CSS, and JavaScript. I have been trying to figure out how to align the numbers to the right side of the input element. Can anyone provide me with guidance on how to achieve thi ...

javascripthtmlcss

Utilizing media queries in AMP for optimizing mobile website performance

Recently, I delved into the realm of utilizing AMP for my blog. After perusing the documentation and observing examples of its application, I must say that anything enhancing performance is a welcome addition to me. Therefore, I am keen on incorporating i ...

htmlcssamp-html

Which language should I focus on mastering in order to create a script for my Epson receipt printer? (Check out the manual for reference)

Printer Model: TM-T88V User Manual: Receipt-marker Web template for the printer: (Provided by Epson) I'm completely new to computer languages and have been trying to understand how to print receipts. I've researched XML, HTML, CSS, and Jav ...

javascripthtmlcssxml

Content within a Row of a Data Table

Hello! I am just starting to learn JavaScript and jQuery. Can you help me with an issue I am experiencing? Basically, I have a table and I need to identify which tr contains a td with the text "Weekly", "Daily", or "Monthly". Once I locate that specific t ...

javascriptjqueryhtmlcss

Tips on saving a form submit button data to localStorage

As a newcomer, I am on a quest to make this function properly. My goal is to create a form where the submit button saves data to the localStorage. Here's what I have tried thus far. <script> function storeRecipe() { localStorage.setItem($(" ...

javascripthtmlcss

Creating a checklist using HTML and CSS can be achieved by utilizing the <span> element and

I'm having trouble changing the color of a span box to red when I focus on a link. The span successfully changes color when activated, but nothing happens when I try to use the 'focus' pseudo-class. On click, different categories will displa ...

htmlcssangularcss-selectorspseudo-element

Collaborate on sharing CSS and TypeScript code between multiple projects to

I am looking for a solution to efficiently share CSS and TS code across multiple Angular projects. Simply copy-pasting the code is not an ideal option. Is there a better way to achieve this? ...

cssangulartypescriptshare

File bootstrap.min.css is currently experiencing compatibility issues

I am currently working on a website where I have two images that are displaying vertically. However, I would like these images to be displayed horizontally with animation. I attempted to use Bootstrap to achieve this horizontal layout, but when I include ...

javascripthtmlcsstwitter-bootstrap

Converting bullet point list to checkboxes once requirements have been satisfied

I am working on developing a password validator with specific regex conditions in Material UI that transitions from bullet points to checkboxes when the criteria are satisfied. Initially, I attempted to use the npm library NiceInputPassword, but it did no ...

javascriptcssreactjsnpmmaterial-ui

Enhance the aesthetic appeal of the Search and Filters component in ASP.NET Core using Bootstrap styling

I am struggling to enhance the style and layout of multiple search filters on the page so that the User Experience is improved. I'm unsure how to effectively design this search component. <section class="search-sec"> <div class=&qu ...

htmlcssasp.net-corerazorbootstrap-4

Interactive hover effect in JavaScript displays a larger version of other thumbnails when hovering over a dynamically loaded thumbnail image, instead of its own full-size image

I recently began teaching myself PHP and Dreamweaver with the help of a video tutorial on building data-driven websites using Dreamweaver. My goal is to create a dynamic table with 6 columns and 20 rows. column1 | column2 | column3 | colu ...

phphtmlcssjavascriptmysql

Trouble with implementing a stationary header for a table on IE9?

I have successfully created a table with a fixed header and scrollable content. I utilized CSS classes "fixedHeader" for thead and "scrollContent" for tbody: thead.fixedHeader tr { position: relative; } html > body thead.fixedHeader tr { displa ...

htmlcss