Expand the column to occupy the remaining height of the row

I've been on the hunt for a solution to this issue, but I haven't had any luck finding one.

Various flexbox properties like flex-grow: 1; and align-self: stretch; have been attempted, but none seem to achieve the desired outcome.

The goal is to make the last column stretch and occupy the remaining height in the row.

Despite making adjustments based on suggestions, it still falls short of what I'm aiming for.

(The blue box represents the element that needs to stretch)

Take a look at the code snippet below:

.product {
  border: 1px solid rgba(0,0,0,.2);
  padding: 15px;
  height: 100%;
}

.product .image {
  padding-bottom: 100%;
  background: rgba(255,0,0,.2);
  margin-bottom: 15px;
}

.product .content {
  border: 1px solid blue;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row">
        
        <div class="col-4">
            <div class="product">
              <div class="image"></div>
              <div class="content">
                The height of this is dynamic.
              </div>
            </div>
        </div>
        
        <div class="col-4">
            <div class="product">
              <div class="image"></div>
              <div class="content">
                It can vary from product to product, but I would like this class to stretch.
              </div>
            </div>
        </div>
        
        <div class="col-4">
            <div class="product">
              <div class="image"></div>
              <div class="content">
                To fill the rest of the columns height.
              </div>
            </div>
        </div>
        
    </div>
</div>

htmlcssbootstrap-4flexbox

Answer №1

I have made some changes on jsfiddle, you can check it out here: https://jsfiddle.net/e4sufy7k/1/

I removed the inner row and col elements and added a height: 100% property to the .card .body class. Does this meet your expectations?

.card {
    border: 1px dashed red;
    border-radius: 0;
    background: #000 !important;
    color: #fff;
}

.card .head {
    border: 1px solid blue;
    padding: 15px;
}
    
.card .body {
    padding: 15px;
    border: 1px dashed #000;
    background: #fff;
    color: #000;
    height: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row">
        
        <div class="col-4 card">
            
                <div class="head">
                    Hello there, I should be an automatically set height! This could be through an 'img' or something similar.
                </div>
                <div class="body">
                    This should match the height of the tallest card.
                </div>
           
        </div>
        
        <div class="col-4 card">
           
                <div class="head">
                    Hello there, I should be an automatically set height! This could be through an 'img' or something similar.
                </div>
                <div class=" body">
                    Stretch me please!
                </div>
            
        </div>
        
        <div class="col-4 card">
          
                <div class="head">
                    Hello there, I should be an automatically set height! This could be through an 'img' or something similar.
                </div>
                <div class="body">
                    I should be dynamic and stretch to fill the rest of the column!
                </div>
            </div>
        </div>
        
    </div>
</div>

Answer №2

To ensure the card div is the same size as its parent, place it inside a col-4 and stretch it to 100%. Additionally, set the height of the body to 100%.

Here's an example:

<div class="container">
    <div class="row">

        <div class="col-4">
            <div class="card">
                <div class="head">
                    Hello! I should be auto-set height, possibly through an 'img' or similar element.
                </div>
                <div class="body">
                    This content should match the tallest card in height.
                </div>
            </div>
        </div>

        <div class="col-4">
            <div class="card">
                <div class="head">
                    Hello! I should be auto-set height, possibly through an 'img' or similar element.
                </div>
                <div class="body">
                    Please stretch me!
                </div>
            </div>
        </div>

        <div class="col-4">
            <div class="card">
                <div class="head">
                    Hello! I should be auto-set height, possibly through an 'img' or similar element.
                </div>
                <div class="body">
                    I should dynamically stretch to fill the remaining space in the column!
                </div>
            </div>
        </div>

    </div>
</div>

Add styling like this:

.card {
    border: 1px dashed red;
    border-radius: 0;
    background: #000 !important;
    color: #fff;
    height: 100%;
}

.card .head {
    border: 1px solid blue;
    padding: 15px;
}

.card .body {
    padding: 15px;
    border: 1px dashed #000;
    background: #fff;
    color: #000;
    width: 100%;
    height: 100%;
}

Answer №3

When using Bootstrap, the .row serves as the flex-box container, allowing only the immediate children (.cols) to interact with each other. In cases where the desired .col items are not siblings of each other, they will not be able to stretch in relation to one another.

On the other hand, if the .card elements are siblings of a .row, they will exhibit the stretching effect.

To achieve the desired result of stretching the .cols, they should ideally be siblings in the layout.

<style>
    .card-head {
        border: 1px solid blue;
        background: #000;
        color: #fff;
        padding: 15px;
    }

    .card-body {
        padding: 15px;
        background: #fff;
        color: #000;
        border: 1px solid red;
    }
</style>
<div class="container">
    <div class="row no-gutter">
        <div class="col-4 card-head">
            Hello there, I should be an automatically set height! This could be through an 'img' or something similar.
        </div>
        <div class="col-4 card-head">
            Hello there, I should be an automatically set height! This could be through an 'img' or something similar.
        </div>
        <div class="col-4 card-head">
            Hello there, I should be an automatically set height! This could be through an 'img' or something similar.
        </div>
    </div>
    <div class="row no-gutter">
        <div class="col-4 card-body">
            This should match the height of the talest card.
        </div>
        <div class="col-4 card-body">
            Stretch me please!
        </div>
        <div class="col-4 card-body">
            I should be dynamic and stretch to fill the rest of the column!
        </div>
    </div>
</div>

If retaining your current HTML structure is preferred, you can utilize CSS styles to achieve the desired appearance. By moving the background and color styles from .card to .head, the visual outcome will align with your expectations.

.card {
    border: 1px dashed red;
    border-radius: 0;

    .head {
        border: 1px solid blue;
        background: #000;
        color: #fff;
        padding: 15px;
    }

    .body {
        padding: 15px;
        background: #fff;
        color: #000;
    }
}

Answer №4

After some troubleshooting, I managed to resolve the issue with the following solution:

Added the following styles to my CSS:
display: flex;
flex-direction: column;

Applied flex-grow: 1; to my .content class within my HTML.

A big thank you to everyone who provided assistance! :)

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

Guide on transferring href parameter from the parent Vue component to the child component

Hey there! I've been working on creating a Vue page, breaking it down into components, and populating it with content from json. It all seems pretty straightforward, but I've hit a snag. Why is the href parameter not showing up in the right place ...

javascripthtmlcssvue.jsvue-component

Ways to retrieve only the chosen option when the dropdown menu features identical names

How can I retrieve only the selected value from the user, when there are multiple select options with the same class name due to dynamic data coming from a database? The goal is to submit the data using Ajax and have the user select one option at a time. ...

javascriptjqueryhtml

How can I adjust the border opacity in a React application?

Can we adjust the border color opacity in React when using a theme color that is imported? For example, if our CSS includes: borderBottomColor: theme.palette.primary.main and we are importing the theme with Material UI using makeStyles, is there a way to ...

cssmaterial-ui

Tips for customizing styles when an element is being dragged over in Material-UI?

If I want to alter the backgroundColor when hovering, I can utilize sx={{"&:hover":{backgroundColor:"yellow"}} Is there a way to adjust the backgroundColor on dragover? It appears that sx={{"&:dragOver":{backgroundCol ...

cssmaterial-uidom-events

Adjusting background image positioning for different screen sizes

Can anyone help me figure out how to adjust my CSS so that when my device screen is small, a specific section of the background image is displayed instead of just the center? Here is how my background image is currently set: background-image: url(*.jpg); ...

htmlcssresizebackground-imagedevice

Designing a versatile pop-up window with jQuery or JavaScript that functions seamlessly across all web browsers

I've encountered an issue with my code where it displays a popup message correctly in Chrome, but when testing it on Firefox and Edge, it creates a strange box at the end of the page instead. Here is the code snippet I'm referring to: var iframe ...

javascriptjqueryhtmlcsspopupwindow

What is the best way to use appendChild within an AJAX get function to manipulate the DOM

I've been working on a code function where I try to append a list item (li) into the HTML received in 'msg', but it's not functioning properly. Any ideas why? function handleFileSelect(evt) { var files = evt.target.files; $(&ap ...

javascriptjqueryajaxhtml

"Switching Classes with a Click Event: A Step-by-

This script is designed to work with SoundCloud's widget in order to enable remote text buttons. I am attempting to modify it so that it functions as a remote for an image button that toggles between different pictures for pause and play, rather than ...

javascriptcssjquery

Opera browser encountering issue with styled image overlay in select list

We have implemented images in CSS to customize our select fields and they appear correctly in most browsers, except for Opera where the images are not displaying. To better illustrate the issue, I have set up a JSfiddle. Please try it out in Opera to expe ...

htmlcssimageformsselect

The :before and :after pseudo classes are not displaying properly on the video element

I'm trying to display a title over a video element while it's playing, but I've run into an issue. When using the <video> tag, it doesn't work as expected, however, when I switch it to a <div>, everything works perfectly fin ...

htmlcssvideo

Change the position of an HTML image when the window size is adjusted

My web page features a striking design with a white background and a tilted black line cutting across. The main attraction is an image of a red ball that I want to stay perfectly aligned with the line as the window is resized, just like in the provided gif ...

javascripthtmlcss

What are some strategies for efficiently positioning buttons using CSS to prevent unwanted consequences?

Below is the CSS and HTML code, detailing a specific issue. * { box-sizing: border-box; font-family: Georgia, 'Times New Roman', Times, serif; } body { margin: 0; font-family: Georgia, 'Times New Roman', Times, serif; } .topn ...

htmlcssbutton

Troubleshooting Problems with Image Width in CSS Styles

I am facing an issue with displaying 3 images in a row side by side. The first image is bigger than the other two, causing them to be pushed down to the next row, which is not what I want. I have created a class and specified the height and width, but it d ...

htmlcsstailwind-css

Changing the size of a dynamic watermark png in php

I'm trying to automate the resizing of a watermark to cover 1/4 of an image. The code for the watermark is functioning, but I'm facing issues with resizing it correctly. <?php $image = $_GET['src']; $path_parts = pathinfo($image); ...

phphtmlgd

The fixed positioned div with jQuery disappears when scrolling in Firefox but functions properly in Chrome, IE, and Safari

Click here to see a div located at the bottom of the right sidebar that is supposed to behave as follows: As you scroll down the page, the div should change its class and become fixed at the top of the screen until you reach the bottom of the parent el ...

javascriptjqueryhtmlcssfirefox

Exploring Navigation States with JQuery: Active, Hover, and Inactive

I've been struggling with the code below as it doesn't seem to be working. I had a simpler code before for swapping images, so if there's an easier way to achieve this, I'm open to suggestions. Just to recap, I'm trying to: 1. La ...

jquerycssmenuhover

Encountered SyntaxError: An unexpected token has been found while integrating leaflet with flask

Despite adding all necessary scripts and configuring my API_KEY in config.js, I keep getting an error message saying "Uncaught SyntaxError: Unexpected token." I have double-checked my API key multiple times, and it seems to be correct. Here is a snippet f ...

javascripthtmlcss

Invoke a C# function (returning a string) within ASP.NET to set the source attribute for an HTML element

I have developed some C# Methods that return a string output, such as "C:/tracks/audio1.mp3", and I want to use this as a reference for my ASP.NET project. Now, I am trying to incorporate my method "GetTrackPath()" into the HTML audio tag so that the meth ...

javascriptc#htmlasp.netrazor

Store additional data with the visitor ID WEB in Fingerprint JS V3

After browsing through similar questions, I couldn't find a solution that fits my needs. Basically, I have a website where a random emoji is generated and stored in local storage. However, this method is not effective as users can easily delete their ...

javascripthtmlfingerprint

Excessive Width Issue Caused by Bootstrap 4 Navbar Items

Having trouble with my Bootstrap 4 Navbar menu implementation. When I add more items, they overflow the container instead of floating correctly. Any CSS suggestions to temporarily fix this issue? <!DOCTYPE html> <html lang="en"> <head> ...

htmlcsstwitter-bootstrapnavbar