Is there a way to ensure consistent heights for various elements within a column, even if their heights are

Currently, I am utilizing the flex property to create uniform columns and vh to ensure they have the same height. This setup is functioning properly, but within each column, there could be a varying number of items. I am interested in having the elements within each column adjust to an even height based on the number of items present, all handled through CSS.

For example: 1 item = 100% height 2 items = 50% height 3 items = 33.33% height And so on.

While I am aware that achieving this effect via JavaScript is possible, I am eager to explore an automated CSS solution leveraging techniques such as flexbox, grid, or alternative methods.

htmlcssflexbox

Answer №1

After carefully analyzing the issue you're facing, I have come up with a solution. Try using the flex: 1 property on the .item class to ensure that each item occupies an equal amount of space, as specified in the problem statement.

Take a look at the code snippet provided below for reference:

body {
  margin: 0;
}

.parent {
  width: 80%;
  padding: 20px;
  display: flex;
  border: 1px solid red;
}

.child {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  padding: 20px;
  border: 1px solid blue;
  height: 60vh;
}

.item {
  flex: 1;
  background: lightGreen;
  border: 1px solid green;
}
<div class="parent">
  <div class="child">
    <div class="item">33.33%</div>
    <div class="item">33.33%</div>
    <div class="item">33.33%</div>
  </div>
  <div class="child">
    <div class="item">50%</div>
    <div class="item">50%</div>
  </div>
  <div class="child">
    <div class="item">100%</div>
  </div>
</div>

I believe this solution aligns with the goal you are aiming to achieve. Let me know if you need further assistance.

Answer №2

Here's a simple way to utilize the Flexbox:

.flex-container {
  display: flex;
}

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

.item {
  flex: 1;
  border: 1px solid;
}
<div class="flex-container">
  <div class="flex-item">
    <div class="item">1/1</div>
  </div>
  <div class="flex-item">
    <div class="item">1/2</div>
    <div class="item">1/2</div>
  </div>
  <div class="flex-item">
    <div class="item">1/3</div>
    <div class="item">1/3</div>
    <div class="item">1/3</div>
  </div>
  <div class="flex-item">
    <div class="item">1/4</div>
    <div class="item">1/4</div>
    <div class="item">1/4</div>
    <div class="item">1/4</div>
  </div>
</div>

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 is the option for receiving automatic suggestions while formatting components in a react.js file?

When styling elements in our app using app.css or styles.css, VS Code provides auto-suggestions. For example, if we type just "back" for background color, it will suggest completions. However, this feature does not work in react.js or index.js. Why is that ...

javascripthtmlcssreactjs

htmlEnhance your webpage with a native-like combobox

<!DOCTYPE html> <html> <body> <form action="demo_form.asp" method="get"> <input list="browsers" name="browser" placeholder="choose browser"> <datalist id="browsers"> <option value="Internet Explorer"> ...

htmlcss

The issue of nested tabs in Bootstrap 3 causing problems with sliders within the main tab has

Hello, I am utilizing Bootstrap 3 tabs. Within the nav-tabs, there are three tab-panes: the first tab contains text only, the second tab includes a slider, and the third tab has nested tabs. However, I encountered an issue where the slider in the nested t ...

javascriptjqueryhtmltwitter-bootstrap

Manipulate React class names by adding or removing them

Is there a way to toggle a className on click to change the style of a component? https://i.sstatic.net/z9FoA.png I need to rotate an arrow to the right when it's clicked and hide all components next to it using display: none;. I also require t ...

cssreactjsmaterial-uimakestyles

Looking for assistance in adding some animated flair to your website as users scroll

I don't have much experience in animation but I would like to create some animation effects on scroll down. Can anyone provide suggestions? I attempted using SVG paths, but it didn't work out as expected. What I am aiming for is that when a visi ...

javascripthtmljqueryanimationsvg-animate

JQuery's attempt to disable the 'hover' feature fails to function as intended

I have a styled table where rows change background colors based on odd and even indexes, with a hover effect included. However, I want to disable the hover effect when a row is selected. Here's the current code snippet: .odd{ background: #f7f7f7 ...

jqueryhtmlcss

Engaging Floor Layout

Currently, I am in the process of developing an interactive floorplan for an office project. The main objective is to provide a user-friendly interface where individuals can search for a specific employee and have their respective office location highlight ...

javascriptjqueryhtmlsvg

PHP is receiving data from $.post in an invalid format

I am facing a challenge in sending a JavaScript Object() to a PHP file in the correct format that $.POST requires. The PHP file does not establish any $_POST[] variables, which suggests that I may be transmitting the data in an improper format. JS: $(&ap ...

javascriptphpjqueryhtmlpost

Troubleshooting: Issues with jQuery JavaScript Modal Popup functionality within MVC framework

When I click on the "Comments" link, a modal popup opens up and displays the content as expected. Now onto my issue: In the first scenario, the desired outcome is achieved but some other code does not execute. In this case, when I place the "@section" ins ...

javascriptjqueryhtmlajaxasp.net-mvc

What is causing the unusual behavior of z-index in this specific scenario?

I have a good understanding of z-index and decided to practice with it by writing the following code: *{ padding: 0; margin: 0; box-sizing: border-box; } body{ height: 100vh; di ...

htmlcss

Guide to turning off the pinch-zoom feature on Windows 8 laptops

I'm currently working on a Windows 8 desktop application where I am using C#, JavaScript, and HTML5. Specifically in the C# portion, I am utilizing the WebView object. My goal is to disable pinch-zoom within my application. I already know how to achi ...

c#htmlinternet-explorerwindows-8internet-explorer-10

Loading CSS files conditionally in Angular2's index.html

Currently, my index.html page features a dark theme: <base href="/"> <html> <head> <title>XXX</title> </head> <body> <link rel="stylesheet" type="text/css" href="assets/dark_room.css"> <my-app ...

javascripthtmlcssangular

Exploring Event Propagation in AngularJS

Currently, I am working on developing a web application using angularjs for the first time. A key feature that I aim to introduce is the ability for users to create a div in the main window upon clicking on an image in the menu. To achieve this functional ...

javascripthtmljqueryangularjsjquery-events

JavaScript: Navigating Through Frames and iFrames in Internet Explorer

Is there a way to run JavaScript code after my iFrames or Frames have finished loading? It seems like document.onReady fires before the frames are actually displayed on the page. Any ideas on how to make this work? I came across a plugin called FrameReady ...

javascriptjqueryhtmliframeframes

Aligning input and submit fields perfectly in the same line

Struggling to get an input form and submit button to align perfectly in Firefox and Safari. Any advice? Here's the current CSS for the 'Keep in touch' widget on www.landedhouses.co.uk: form.mc4wp-form p{margin-left:0px !important; display: ...

htmlcss

Learn how to dynamically show the chosen option from a dropdown menu in input text fields using AngularJS

html file: <select ng-model="shipping" ng-options="shipping.shipping for shipping in shipAddress"> <option value=''>--Select Address --</option> </select> <form name="shippingForm" class="form-horizontal" role="form" ...

javascripthtmlangularjs

How can I design a tooltip window using HTML, jQuery, or other elements to create a box-like effect?

As someone who is new to front end development, I am facing a challenge with my web app. The requirement is that when a user hovers over an image, I need a 'box' to open nearby and display a pie chart. Although I have managed to get the hover fu ...

javascriptjqueryhtmlweb-frontend

Is it practical to extract the page type/name from the CSS of the selected tab?

My website has multiple tabs on a single page and I want to integrate Google Analytics code. However, since all the tabs are part of the same page, I need a way to track which tab the user is interacting with. Would using CSS to check for the selected tab ...

javascriptcsswebgoogle-analyticsportlet

Adjusting table font dynamically using Angular and CSS

I am currently working on an Angular project and facing a challenge with setting the font size dynamically in a table. I have created a function to address this issue, which includes the following code snippet: $('.td').css({ 'font-size ...

cssangular

What is the best way to center-align elements?

I have a couple of inquiries. First off, I'm facing an issue with centering everything within a form while aligning the text to the left side of the fields. I've attempted using justify-center and align-items within the "container" class and th ...

htmlformscssflexbox