Balanced Height Flexbox Columns

After searching and utilizing code from SO, it's evident that I am making a critical error. Typically, I rely on Bootstrap or Materialize, but this time, I wanted to start from the ground up.

I have constructed a basic Flexbox layout featuring an image, title, and subtext, with variable heights. However, I can't seem to achieve equal height for the boxes.

I attempted adding Flex 0 1 auto to the p tag, but it doesn't result in the desired expansion of the entire layout.

For reference, you can view the Fiddle I created: FlexBox Equal Column.

Below is the base HTML structure:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Simple Card Test</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
      <div id="wrapper">
        <div class="col">
            <div class="box">
                <img src="https://avatars.dicebear.com/api/female/paula.svg?" />
                <h4>Title</h4>
                <p>Subtifdfdsfsdf sdf sdfds fsdf sdfsd fsd fsf sdfs fsdfsdf fdsf fdtdsf df sdf sdfs fsd dsf df sdfd fds fdsle</p>
            </div>
            
        </div>
        <div class="col">
            <div class="box">
                <img src="https://avatars.dicebear.com/api/female/alice.svg?" />
                 <h4>Title</h4>
                <p>Subtitle</p>
            </div>
        </div>
    </div>
  </body>
</html>

I'm seeking guidance on what mistake I might be making here. Any help would be greatly appreciated.

Thank you!

Answer №1

After reviewing your code,

consider including the following properties in your CSS:

 #container {
    display: flex;
}

 .item { 
     box-sizing: border-box;
}

 .element {
    height: 100%;
}

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

Tips for dynamically modifying style mode in Vue.js

I am looking to implement a feature where the style can be changed upon clicking a button. In my scenario, I am using Sass/SCSS for styling. For example, I have three different styles: default.scss, dark.scss, and system.scss. The code for dark.scss look ...

Is there a way to incorporate page animations when utilizing the <a href> tag in HTML?

I have created several HTML files. On the main page, I simply inserted some code like this: <a href="new.html> <img src="img/button" id="buttonid"> </a> When I click the button, it takes me to the new.html page. I would like ...

Stable navigation bar implemented with a grid design

I'm struggling with creating Navbars in Grid Layout. https://codepen.io/Aeshtray/pen/BdqeZL For mobile view, I want the Navbar to be fixed horizontally (as currently coded), but once reaching a width of 500px, I need it to become vertically fixed on ...

What Browsers are Compatible with Stream Segmentation?

Apple has developed a specification for using .m3u as a playlist file of .ts video segments. While this is known to work on iOS devices and OSX Safari, is this format supported by any other web browsers? If not, are there alternative methods available for ...

Insert a gap between the two columns to create some breathing room

Does anyone know how to create spacing between columns in an HTML table without affecting the rows? In my table, each column has a border around it: <table> <tr> <td style="padding:0 15px 0 15px;">hello</td> <td style=" ...

PHP code for sending email with attachment file

I have created an HTML form with the option to upload a file and send it to me via email. Additionally, I already have a PHP script that sends textbox values and text area values via email. Now, I would like the uploaded file from the form to be sent to m ...

Activating the Speech Recognition feature in a form triggers the submission of a post

Currently, I am integrating webkitspeechRecongition into a form to allow users to enter data using their voice by pressing a button. However, a challenge arises when the call is triggered by a button within the form as it results in a post/submit action th ...

How can I use jQuery to set up form validation for an input textfield?

Check out this code snippet: <form data-test="loginForm-container" novalidate="" method="POST" enctype="multipart/form-data"> <div class="css-o5d3v1 e1ovefus2"> <div data-test="guestForm-email-wrapper" class="e1ovefus1 css-yjv4po e1eu3s ...

Guide to creating a PHP script for interfacing with a MySQL database

Right now, I have just finished learning HTML and I am attempting to write PHP scripts for connecting to MySQL. However, the information on websites such as Google is confusing because they do not specifically outline how to connect using PHP only. Could ...

Using Jquery to assign negative values in CSS styling

Here is the jQuery code snippet I am working with: <script type="text/javascript" src="js/jquery.js"> </script> <script type="text/javascript"> $(document).ready(function() { get_font_size(); set_sidebar(); }); function get_f ...

Delete a designated section from a URL with the power of jQuery

I have a URL like http://myurleg.com/ar/Message.html and I need to change ar to en in it when clicked on. For example, if my current URL is: http://myurleg.com/ar/Message.html After clicking, it should become: http://myurleg.com/en/Message.html I attemp ...

What is an alternative method for finding an element on an Amazon page without relying on xpath or CSS selectors?

Visit the international sales offers on Amazon. Find the checkbox for Books with Inspector. Click on the checkbox to select it. 4. https://i.sstatic.net/PKYjy.png I have been trying to locate the unique identifier "Books" through iteration. If you h ...

Is it possible to modify the text displayed under your website when you search for it online?

I recently developed a website using HTML, CSS, and Javascript. Whenever I search for it on the internet, there is always a text paragraph displayed below its name in the search results. A similar example can be seen in the image here for Facebook. Is th ...

When an SVG image is embedded, its color may not change even after being converted to an inline SVG

I've inserted an SVG using an img tag. When hovering over it, I want the fill color of the SVG to change. I attempted to convert the SVG to inline SVG following this method, but it doesn't seem to be working as expected. No console errors are b ...

The dynamic styles set by CSS/JavaScript are not being successfully implemented once the Ajax data is retrieved

I am currently coding in Zend Framework and facing an issue with the code provided below. Any suggestions for a solution would be appreciated. The following is my controller function that is being triggered via AJAX: public function fnshowinfoAction() { ...

Enhancing user interfaces with jQuery by updating DOM elements

Can anyone help me figure out how to update a webpage so it functions as a report that multiple people can contribute to? I'm using forms to collect data and want it to instantly display under the correct category headings. Currently, I'm using j ...

Centered flex item with a flexbox grid underneath

Looking to create a layout with an intro section on the left side and a sidebar on the right within a container. Below the intro section, I want four divs evenly spaced like a grid. But I'm struggling with setting up this grid, possibly due to flexbo ...

In React, CSS @media queries are specifically designed to function only within the Device Mode of Developer Tools

As indicated by the title, I have designed a responsive web app using the React framework along with various @media queries. When I resize the page in Developer Tools' Device Mode, the queries work perfectly fine and everything functions as expected. ...

Customizable page layout with fixed width that adjusts based on content

I am looking to enhance the design of my website by updating its template. I want the content to be displayed within a fixed width centered div. While there are plenty of examples on the web for this, I want to ensure that existing text and tables in my ...

The styling of HTML elements is ineffective when using scoped styles

I'm facing an issue where my element styling doesn't seem to work when using the scoped attribute. Upon inspecting the element, it appears that the styling is not being applied when using scoped. The reason I need to use scoped is because I want ...