Ways to ensure two stacked divs have equal height

I'm in the process of designing a card with two stacked divs. The upper section of the card contains an image, while the lower part consists of text. How can I ensure that both the top and bottom divs have equal heights? I am hesitant to specify fixed pixel heights for the divs as I do not know how much text will be on the other cards.

.card {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.cardTop, .cardBottom {
  border: 1px solid;
}

img {
  display: block;
}
<div class="card">
  <div class="cardTop">
    <img src="https://placehold.it/200x100" alt="">
  </div>
  <div class="cardBottom">
    <p>text of the card goes here</p>
  </div>
</div>
htmlcssflexbox

Answer №1

Utilize the flex-box styling in the following manner:

.card {
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-wrap: nowrap;

  padding: 5px;
  height: 15em; //adjust as needed
  width: 15em;  //adjust as needed
}

.card > div {
  flex: 1 1 50%;
  overflow: hidden;
}

By following this structure, your 2 divs will split at 50% of the height of your overall .card container.

For a visual example, you can refer to this quick demonstration online: https://stackblitz.com/edit/angular-pechib

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

What could be causing the lack of firing with Mobile Safari and jQuery events?

My HTML5/JavaScript app, originally designed for an in-dash car unit, is now being ported to the browser for marketing and presentation purposes. The transition seemed simple at first, just some CSS adjustments for cross-browser compatibility. However, whe ...

jqueryhtmliosmobile-safarijquery-events

Scroll to Reveal Content Hidden Behind Hero Image

I am absolutely enamored with the Beautiful Stories section on Medium's website. The way they showcase their content is just mesmerizing. One thing I've noticed is how the cover image and preview of the content changes as you resize your browser ...

javascriptjquerycssresponsive-design

Difficulties encountered while trying to set up a multi-level list for a mobile

Trying out a tutorial to create a mobile dropdown menu. Encountering an issue when adding new lists inside a previous tag affects the functionality of the dropdown menu. Attempted to adjust the CSS without success. All the lists are displayed without req ...

htmlcss

Is it possible to use Bootstrap without using rows?

I am a fan of using bootstrap, but I am currently facing a challenge that requires a grid layout where cells stack vertically without any visible lines separating them. Similar to the layout seen on Pinterest. While Bootstrap's normal grid system wor ...

csstwitter-bootstrap

How can I line up the bootstrap datepicker with a bootstrap column?

I currently have Bootstrap 3.3.7 and a bootstrap datepicker version 1.6.4 integrated into my project. However, I am facing an issue where the datepicker does not fill up the designated column within a div with the class col-md-6. Here is the HTML code sni ...

htmlcsstwitter-bootstrapdatepicker

How come my button function is yielding output just once?

Currently, I am exploring the functionalities of a basic VSCode extension webview. My main goal is to trigger a message display every time a button is clicked, but I have encountered an issue where the message only appears the first time. Below is my HTML ...

javascripthtmlnode.jsvisual-studio-codevscode-extensions

Is it possible for Google to crawl and index a website that has minified HTML and CSS?

After creating a Bootstrap website, I noticed that the HTML file is nearly 400kb in size, making it slow to load on mobile devices. To address this issue, I am considering using the tool to minify the code. Will Google be able to properly index a we ...

htmlcssperformanceminify

Is it feasible to hide the key element until modified by my code using waitForKeyElements?

I've developed this userscript (with valuable assistance from Stack Overflow) specifically for the website metal-archives.com. Here is the basic structure of the script: function appendColumn(...) { // code for adding a column // code for en ...

javascriptjquerycssajaxgreasemonkey

Modify the layout of columns in Bootstrap dynamically without compromising on responsiveness

On my webpage, I have a section where I display cards of specific sizes (250*250). I want to show a maximum of 4 cards per row, stacking them on smaller viewports. Currently, the layout works fine with 4 or more cards, with the excess automatically moving ...

htmlcssbootstrap-4

Iterating through a variety of selectors on a webpage to consolidate and save into a single large data frame

I need help with a project and got a quick response last time, so here I am again. The code below is scraping data from a website and adding a column to indicate which instance of the table it is extracting. My current challenge is loading all Game Recency ...

pythonhtmlpandasseleniumweb-scraping

Removing Swipe Transition with CSS

Currently working on customizing a Wordpress Template and aiming to implement specific effects using CSS. Take a look at the link: I am trying to remove the Swipe Effect that occurs when hovering over the pictures, but I am struggling to identify the cor ...

csswordpresstemplatesanimationeffect

The jQuery call stack size is exceeded when attempting to move focus to the next input field

Greetings, fellow users! I've encountered an issue with a form on my website. Here's the code snippet: <form name="data" action="#" method="post"> <input type="text" name="data" maxlength="1" class="a"> <input type="text" name="d ...

javascriptjqueryhtml

What is the best way to create a unique transition for every component?

I have three elements that I would like to display with a transition effect when they appear or disappear. There is one main element and the other two show up when you click the corresponding button. You can view my current code sample here: https://jsfid ...

cssvue.jsvuejs2css-transitionsvuejs-transition

Navigating with AngularJS

My server is utilizing angular for routing purposes. It sends a HTML file containing a js file with routing using angular js to the browser. Here is the server code (which sends the check.html with the routing file main.js) : var express = require("expre ...

javascriptjqueryhtmlangularjsnode.js

Possible for jQuery autocomplete to reposition the list?

Is it feasible for me to adjust the position of the dropdown list by moving it down 4 pixels? I've experimented with various styles within .ui-autocomplete {}. These include: margin-top: 4px; top: 4px However, these modifications don't appe ...

jquerycssautocompleteposition

Step-by-Step Guide on Automatically Uploading a File From a Link

When it comes to uploading a file, I can achieve this using the following code : <!DOCTYPE html> <html> <head> <title>File Upload</title> <link rel="stylesheet" type="text/css" href="main.css" ...

javascripthtml

Utilizing variable references in an SCSS root file when importing from a module file

My SCSS skills are still in the early stages, as I'm currently diving into the basics. I'm curious to know whether it's possible to access variables and mixins from a parent file in a child module. To better explain, here's an example: ...

htmlcsssass

When using threejs, the color set for setClearColor is supposed to be white. However, when calling an external HTML file, it unexpectedly renders as

When I call an external HTML file in Three.js, the value for setClearColor is white but it renders as black. How can I solve this issue? Click here to view the image Here are the codes from the external file: <div id="3d-modal"></div> <sc ...

javascripthtmlcssiframethree.js

Determine whether the child element extends beyond the boundaries of the parent element

I am currently working on determining whether a child element is visible within its parent element. To achieve this, I am comparing the width of the parent element to the position of the child element using position().left. Given that I have multiple dist ...

jquerycss

Can someone guide me on incorporating a plus/minus feature into Django forms?

What is the best way to integrate this into a Django form? 2/3: 2 represents the currently selected number of items, while 3 is the maximum allowed Note that this form does not interact with the model; instead, it sends data to the Redis server upon cl ...

htmlpython-3.xdjangodjango-forms