Tips for implementing a CSS Flexbox layout with varying div heights

I am working on a page that features five unique panels, each with its own distinct height and width. I have been considering implementing CSS Flexbox to ensure these panels stack properly as the page becomes responsive.

However, one major issue I've encountered is that when using CSS Flexbox, all of the divs are being set to the same height, which does not align with my intentions for this layout.

Below is the Haml code used to generate the HTML structure:

.property-information
  .general-information-panel
     enough content for a height of 60px;
  .government-information-panel 
     enough content for a height of 100px;
  .owner-information-panel 
     enough content for a height of 80px;

Here is the corresponding CSS styling:

.property-information{
  font-size: 15px;
  opacity: .75;
  display: inline-flex;
  justify-content: space-between;
}

.general-information-panel{
  background-color: #e7f5fe;
  width: 400px;
}
.government-information-panel{
  background-color: #e7f5fe;
  width: (500px;
}
.property-owner-information-panel{
  background-color: #e7f5fe;
  width: 400px;
}

My question remains: Is there a way to utilize CSS Flexbox while accommodating divs or panels with varying heights?

htmlcssrubyflexboxhaml

Answer №1

While I have begun a snippet, I am unsure of what you are expecting.
It would be helpful if you could provide a schema.

Once provided, I can assist further by modifying this snippet.

container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  border: 1px solid red;
  width: 300px;
}

row {
  width: 200px;
  height: 50px;
}

#a {
  background-color: #fad390;
}

#b {
  background-color: #f8c291;
  width: 100px;
  height: 100px;
}

#c {
  background-color: #6a89cc;
}

#d {
  background-color: #82ccdd;
  width: 300px;
  height: 300px;
}

#e {
  background-color: #b8e994;
}
<container>
  <row id="a"></row>
  <row id="b"></row>
  <row id="c"></row>
  <row id="d"></row>
  <row id="e"></row>
</container>

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

Executing a function defined in a .ts file within HTML through a <script> tag

I am attempting to invoke a doThis() function from my HTML after it has been dynamically generated using a <script>. Since the script is loaded from an external URL, I need to include it using a variable in my .ts file. The script executes successfu ...

javascripthtmlangular

Various lists do not appear directly under each other

Hello everyone, I recently created a webpage displaying different lists of football players. My goal is to keep the lists stacked vertically without any floats that would make them appear side by side. The separate lists are essential for properly categori ...

htmlcsslistcss-floathtml-lists

Troubleshooting Issue with Ionic's UI Router

Recently, I created a basic Ionic app to gain a better understanding of UI router functionality. To my surprise, when I ran the app, nothing appeared on the screen. Additionally, the developer tools in Google Chrome did not show any errors or information. ...

javascripthtmlangularjsionic-framework

The URL is not being updated despite changes in document.location hash

I have created a script that toggles (show/hide) between different DIVs on the page (highlighted below in the various boxes =). However, I am facing an issue with updating the URL string when switching between different DIVs. For instance, if I navigate t ...

javascriptjqueryhtmlajax

Connect the mileage tracker to a Datalist or grid view component

I recently downloaded the Odometer Sample from , however, I am facing an issue where only the first element in the Datalist is getting the Odometer display, while others are not displaying it. Here is the snippet of code: <script type="text/javascript" ...

javascriptjqueryasp.netvisual-studio-2010css

Tips for repositioning my sidebar using CSS and HTML

I'm a beginner in CSS and HTML and I'm struggling to make my sidebar move to the side on my website. I have divided my site into three div areas: one for the 'sidebar', one for the 'main content', and one for both called &apos ...

htmlcsssidebar

Ways to verify if one div in jQuery contains identical text to another div

I need help with a jQuery script to remove duplicate text in div elements Here's the requirement: If div1 contains the text "hi" and div2 also contains "hi", then div2 should be removed Below is my current code snippet: <script src="https:/ ...

javascriptjqueryhtml

When working with NodeJS and an HTML form, I encountered an issue where the 'Endpoint'

Having trouble sending input data from a form to my nodejs endpoint. When I try printing the req.body, it shows up as undefined and I can't figure out why. Here is the relevant API code snippet: var bodyParser = require('body-parser') var e ...

javascripthtmlnode.jsexpressrequest

Having trouble transmitting parameters through ajax

I have been attempting to use ajax to send variables to a php page and then display them in a div, but unfortunately, it's not functioning as expected. Below is the HTML code: <div id="center"> <form> ...

javascripthtmlajax

The radio button's checked attribute fails to function

I am currently working on adding a hover effect to radio button labels, and while it is functioning correctly, I would like to achieve the following: When a radio button is selected, I want the corresponding label to have a background color. Despite tryi ...

htmlcssradio-button

I'm unsure about the JavaScript toolkit framework's handling of selecting HTML class attributes

I have been exploring the Electron Framework using a JavaScript toolkit known as Xel. In my main.js file, I am working with the following syntax: document.querySelector("menu.selected").className.remove('selected') In my Xel code snippet, I hav ...

javascripthtmlcsselectronjavascript-framework

Strange spacing issues with inline-block elements and struggling to vertically center content within them

I feel like I'm losing my mind trying to figure this out... any help would be greatly appreciated. There are three divs on the page that need to sit on a single line. They must be square with rounded corners, so setting width and height is necessary ...

htmlcss

Navigating between child nodes in an HTML drop down list with multiple options and hierarchical structure

Hey there! I am looking to create a unique HTML hierarchy drop-down menu. It will have multiple levels or options, with each option having the potential for child nodes. When an option has child nodes, an arrow will appear next to it. Clicking on this ar ...

javascriptjqueryhtmlcss

Unable to navigate to specific tab in Laravel 6 navigation tabs using URL parameter (e.g. myweb/pages#tab1)

I'm having trouble navigating to the tabs pages, they only show up in the URL (myweb/pages#tab1 .. myweb/pages/#tab2 ..). Can someone please help me out? View image <div class="card-body"> <ul class="nav nav-tabs" id="myTab" role="tabli ...

htmllaravelbootstrap-4navbar

Creating an interactive star rating system with JSON data

Currently, I am in the process of developing a star rating system specifically designed for restaurant reviews. The 'Attributes' displayed on the user interface are dynamic and fetched in JSON format. There exist five attributes with each having ...

javascriptjqueryhtmlcss

I am facing a challenge with my data, as it includes start and end values representing character indexes for styles. I need to find a way to convert this information into valid HTML tags

I have some content from another source that I must transform into proper HTML. The content contains a string such as: "Hello, how are you?" Additionally, there is a separate section detailing styling instructions. For example: 'bold:star ...

htmlnestedformattingtags

Determining the measurements of an svg path without relying on the bounding box

Is there a way to retrieve the dimensions of an svg path and showcase it within a div without relying on the bounding box method? I've noticed that the bounding box can be buggy in Webkit especially with bezier curves. Just so you know, I am currently ...

javascripthtmlsvgjquery-svglibrsvg

Is there a way to determine the exact number of pixels being utilized by the body tag when it is set to 100% width?

Currently working on designing a website with a fluid layout. Trying to utilize percentages as measurements in order to achieve this. From my understanding, percentages are calculated based on the parent element. Given that HTML tags do not have a set widt ...

htmlcssfluid-layout

Which is better for SEO: using H tags or image alt text?

In need of a major website title that stands out. Which SEO solution reigns supreme? Implementing an image with alt text "my crucial page title" Utilizing h1 tags for the "my crucial page title" text ...

htmlseo

Is there a way to display two words side by side in React components?

I previously had the following code: projectName: project.get('name') === 'default' ? 'No Project' : project.get('name') In the render() method, it was written like this: <div className='c-card__projects&ap ...

javascriptcssreactjsstyles