Styling columns to be inline-flex without taking up the full height

I'm currently working on a project similar to "Trello" or "Zenhub," using a Kanban board with 4 columns placed in a div#board. The columns are set to display: inline flex, creating a neat horizontal alignment. However, I encountered an issue where each column has the same height. Is there a way to set a minimum height of 400px for each column when there are no cards present?

Here is the link to the JSFiddle

#board {
  overflow-x: auto;
  min-height: calc(100vh - 154px) !important;
  padding: 0 2rem 2rem 0;
}

div.column-container {
  display: inline-flex;
}
/* -= COLUMN =- */

div.column {
  order: 1;
  width: 400px;
  min-width: 400px;
  min-height: 100px;
  margin: 2rem;
  border-radius: .8rem;
  padding: .5rem;
}
jqueryhtmlcssflexboxmaterialize

Answer №1

When your container has the align-items stretch property by default, it means that the items will fill the height of the container. To change this behavior, you can set your items to align at the start using flex-start.

https://jsfiddle.net/XYZ123/abc456de/

div.column-container {
    display: inline-flex;
    align-items: flex-start;
}

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

I require assistance in troubleshooting and repairing my HTML and JavaScript code

I am working on creating a feature where users can input their upcoming birthday date and receive an alert showing how many days are left until then. However, I encountered an issue where the alert displays NaN (Not a Number) before the birthday is entered ...

javascripthtml

I am encountering a problem with the $invalid property in AngularJS

Hey there, I've got a coding dilemma involving three number inputs, which I will refer to as the first input, second input, and third input for clarity. Here's the setup: <div> <form name="formOpenMax"> <div clas ...

javascripthtmlangularjstwitter-bootstrapvalidation

Fixing the Jquery animation glitch triggered by mouseover and mouseout

In my project, I have implemented a small mouseover and mouseout functionality. The challenge I am facing is that I need to keep the mouseout function using animate() instead of css() for specific reasons. The issue arises when I quickly do a mouseover fo ...

javascriptjqueryhtmlcssanimation

Convert HTML table data to JSON format and customize cell values

Hey there, I have a HTML table that looks like this: <table id="people" border="1"> <thead> <tr> <th>Name</th> <th>Places</th> <th>Grade</th> </tr> & ...

javascriptjqueryhtmljsonhtml-table

Issues have arisen with jQuery methods functioning properly within the Owl Carousel

My owl carousel displays rotating boxes that each contain a button. When I click the button in a box, I want to switch a class on a div within that same box. This functionality works perfectly until I wrap it in an owl carousel and initialize it. Once th ...

jqueryhtmlowl-carousel

"Submitting an HTML form and displaying the response without redirecting to a

I created a basic portlet for Liferay that includes a form for inputting parameters to send to an external webservice. However, when I submit the form, I am redirected to the URL of the webservice. Is there a method to prevent this redirection and instead ...

htmlhttppostliferayportlet

The toggleClass() function is only toggling between a single class

I'm currently facing an issue with a jQuery/Angular function that is triggered on click. <a ng-click="like()" href="#" class="like like--yes"></a> Essentially, my goal is to switch between the classes like--yes and like--no when the like ...

javascriptjqueryangularjs

Creating a JSON Response Using PHP API

I created a basic JSON response to test the functionality of an AJAX request on a mobile device. Using a local domain called test.local, I generated a json response. header("Content-Type:application/json; charset=utf-8"); echo json_encode(array('nam ...

javascriptphpjqueryjsonajax

The modal window does not display a scroll bar

I'm currently facing an issue where the scroll bar is not appearing on my page when more elements are added. In addition, I have a modal that covers the entire page when clicking on an item. However, changing the CSS position: fixed property affects ...

javascripthtmlcssreactjs

Decoding HTML using jQuery AJAX

I need to populate a div with an HTML table using Ajax. HTML: <div id="tableDiv"></div> Javascript: $.ajax({ url: '../include/generateTable.php', success: function(data) { $("#tableDiv").html(data); }, data: {id: id, numPerPage: ...

jquery

Leveraging JSON Data in Highcharts

I am looking to create a column range chart using Highcharts to display a series of high and low temperatures. I found a demo example that showcases the kind of chart I want on the Highcharts website at: http://www.highcharts.com/stock/demo/columnrange Th ...

javascriptjqueryjsonhighcharts

What is the best way to extract the lodash score from a URL using JSON parsing?

Can someone help me figure out how to extract and store the names from a URL into an array, then parse JSON data to retrieve the lodash score and convert it into a whole number? Any assistance would be greatly appreciated. <head> <title> ...

javascriptjqueryjsonajax

Conflicting configurations in VS Code causing issues

Currently making adjustments to my JSON settings and everything is functioning correctly, however, I keep encountering this persistent error: "Expected comma jsonc(514)" Here's a snippet of my code that's causing the issue: "css.li ...

cssjsonvisual-studio-codesettings

Decipher complex JSON structures

I am working with a multi-level JSON structure: { "1":{ "name":"PHP", "slug":"/tag/php", "type":"Tag" }, "2":{ "name":"JavaScript", "slug":"/tag/javascript", "type":"Tag" }, "3":{ ...

javascriptjqueryjson

Is there a way to refresh CSS styles when the window width is adjusted?

Is there a way to refresh CSS styles when the window width changes? I attempted this method, but unfortunately it did not work as expected. A simple refresh (F5) helps to rectify the CSS tags. jQuery(function($){ var windowWidth = $(window).width(); ...

javascriptjquerycssresizereload

Scrolling to the active list item in the navigation bar

Having an unordered list with the id mainul in the navigation bar is causing a problem when the page reloads. The navigation bar always starts at the beginning, but I would like it to automatically scroll to the active li element. This is my HTML code: & ...

javascriptjqueryhtml

Utilizing jQuery to dynamically load and display multiple files within a single div, replacing any previously loaded content

Forgive my lack of experience, as I am just starting out with this and it may be a simple issue. My goal is to have an empty div (popBox) load a file when a link is clicked, but currently I am struggling to overwrite the content in the div when clicking o ...

jqueryhtmllaravellaravel-4

Animating components when they first mount in React

I'm attempting to implement an onMount animation in React (and Tailwind if relevant). The code I currently have is as follows: const Component = () => { const [mounted, setMounted] = useState(false) useEffect(() => { setTimeout(( ...

cssreactjs

What about employing the position:fixed property to create a "sticky" footer?

I've come across various methods for creating a sticky footer, such as Ryan Fait's approach found here, another one here, and also here. But why go through the trouble of using those techniques when simply applying #footer{position:fixed; bottom ...

htmlcssfootersticky-footer

JSON retrieving a singular record exclusively

I am facing a dilemma with my code. When using a certain function, I retrieve hundreds of records but I am unable to add any additional information. Here is the code snippet: function(data){ $.each(data.products, function(i,item){ ...

jqueryjsonurlformat