When using Flexbox with a column wrap and setting the height to min-content, the wrapping behavior may not

I'm facing a CSS challenge. I have divs of varying heights and I want the parent element to adjust its height based on the tallest child element, while keeping the rest of the elements aligned properly. The code provided below achieves this for rows but not for columns when the body class is changed accordingly. Any suggestions on how I can achieve this?


body.row #parent {
  display: flex;
  flex-flow: wrap row;
  width: min-content;
}

body.row .child {
  display: flex;
  flex-direction: row;
  border: 1px solid red;
  width: max-content;
}

body.column #parent {
  display: flex;
  flex-flow: wrap column;
  height: min-content;
}

body.column .child {
  display: flex;
  flex-direction: column;
  border: 1px solid red;
  height: max-content;
  width: max-content;
}
1. Line 2. Line
1. Line 2. Line
1. Line 2. Line
1. Line 2. Line 3. Line 4. Line 5. Line 6. Line 7. Line 8. Line
1. Line 2. Line
1. Line 2. Line
cssflexbox

Answer №1

To achieve the desired layout, apply display: inline-flex; to the element with the id of #parent.

body.row #parent {
  display: flex;
  flex-flow: wrap row;
  width: min-content;
}

body.row .child {
  display: flex;
  flex-direction: row;
  border: 1px solid red;
  width: max-content;
}

body.column #parent {
  display: inline-flex;
  flex-flow: wrap column;
  height: min-content;
}

body.column .child {
  display: flex;
  flex-direction: column;
  border: 1px solid red;
  height: max-content;
  width: max-content;
}
<body class="column">
  <div id='parent'>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
    </div>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
    </div>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
    </div>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
      <span>3. Line</span>
      <span>4. Line</span>
      <span>5. Line</span>
      <span>6. Line</span>
      <span>7. Line</span>
      <span>8. Line</span>
    </div>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
    </div>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
    </div>
  </div>
</body>

Answer №2

height: min-content; is utilized for all child elements collectively. To ensure the children wrap, you must define a max-height: (someValue)px on the #parent

body.row #parent {
  display: flex;
  flex-flow: wrap row;
  width: min-content;
}

body.row .child {
  display: flex;
  flex-direction: row;
  border: 1px solid red;
  width: max-content;
}

body.column #parent {
  display: flex;
  flex-flow: wrap column;
  max-height: 100px;
  width: 200px
}

body.column .child {
  display: flex;
  flex-direction: column;
  border: 1px solid red;
  height: max-content;
  width: max-content;
}
<html>

<body class="column">
  <div id='parent'>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
    </div>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
    </div>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
    </div>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
      <span>3. Line</span>
      <span>4. Line</span>
      <span>5. Line</span>
      <span>6. Line</span>
      <span>7. Line</span>
      <span>8. Line</span>
    </div>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
    </div>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
    </div>
  </div>
</body>

</html>

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

Creating a dynamic canvas with a three-dimensional model using three.js: A step-by-step guide

I'm currently developing a website where I have integrated a canvas element to display a 3D object (specifically, a cube) using three.js. The canvas is housed within a div, following the guidelines found in various documentation. The issue arises wh ...

javascriptcsshtmlthree.js

The password-protected HTML blog remains hidden until the correct entry is entered into the password box, causing

After successfully creating a password redirect page where entering the correct password redirects you to another URL (psswrdtest.tumblr.com with the password as correctpsswrd, redirecting to google.com*), I attempted to improve it by making the password p ...

javascriptjqueryhtmlcsspasswords

Resizing the elements within an iframe: Troubleshooting problems with embedding Bandcamp players

My goal is to embed a Bandcamp music player on my WordPress blog page, but I'm facing a challenge. The maximum width of the current player is 700px and I need it to be 900px. After consulting with someone at Bandcamp, they directed me to the old versi ...

htmlcssjsoniframe

Issues with a responsive website not displaying correctly in the Firefox browser

I have created a carousel that is functioning correctly. However, I am encountering an issue with making it fully responsive. It appears to work properly in webkit browsers, but there are some issues in Firefox. Despite the images resizing properly, the ...

htmlcss

Classic design of the shadow element

I have main.js and index.html below class CustomTagA extends HTMLElement { constructor() { super(); const shadow = this.attachShadow({mode: 'open'}); const wrapper = document.createElement('h1'); ...

javascripthtmlcssshadow-dom

What is the correct way to call upon Bootstrap's CSS that was obtained through a Gradle dependency?

I'm having trouble referencing the Bootstrap library from the 'External Libraries' section in my project. In my build.gradle file, I included: compile group: 'org.webjars', name: 'bootstrap', version: '3.3.7' ...

csstwitter-bootstrapintellij-ideagradle

The image is exceeding the boundaries of its parent element, even though a height has been specified

I need assistance with aligning an image inside a div that should take the height of its parent div, specifically the .hero class. Despite setting the image's height to 100%, it still extends beyond the parent div and doesn't adhere to the specif ...

css

Could someone assist me with rearranging blocks in Squarespace by utilizing CSS?

Greetings, fellow readers! After a period of silent observation, I am finally making my presence known. My wife and I are in the process of creating her freelance services website. However, we have encountered a troublesome issue that has left me quite pe ...

cssbootstrap-4squarespace

Mixing together an array of colors, experimenting with adding a touch of transparency

Here is my first question, diving right in. I recently created a canvas in HTML and followed a tutorial to generate random floating circles that interact with the mouse position......if you want to check it out, click here. The issue I'm facing now ...

javascripthtmlcssarrays

Creating a vertical scrollable content using FlexBox

Struggling to create a scrollable box using flex The Box element with the id=scroll is not behaving as expected, causing content overflow How do I set the Box to overflow=auto and enable scrolling for the content? Spending countless hours trying to unrav ...

cssreactjsflexboxmaterial-ui

Can you help me understand how to ensure the CSS translate feature lands in a specific div, no matter its initial position?

I'm facing a roadblock in my journey to create a card game. The issue arises at the final stage of the Translate function implementation. In this game, the player is dealt 30 cards (I've simplified it to four for ease of programming), and upon cl ...

javascriptcss

Utilizing Django templates to implement custom filters within CSS styling

@register.filter(name='cf') def formattedAmount(amount): # Convert the numerical amount to a string with comma formatting formatted_amount = f"{int(amount):,}" # Determine if the number is positive or negative and set CSS class accor ...

cssdjango

Tips for designing a table with a stationary first column in HTML/CSS

I am looking to design a table that can be horizontally scrolled with a dynamic number of columns. The goal is to keep the first column fixed/frozen while scrolling horizontally. I attempted to achieve this using the following CSS, which successfully keeps ...

htmlcsshtml-tablecss-tables

Using border-spacing on table body rows exclusively

In my table, I have 2 header rows and multiple body rows. To create a spacing of 10 pixels between body rows, I used the following CSS: border-collapse: separate; border-spacing: 10px; However, this also affected the spacing in the header rows, which I w ...

htmlcss

Using Selenium to choose an element based on the text of its sibling element

I've been working on a selenium script for: My goal is to select the "Add to Compare" element for "Sony Xperia," but it's not being located. I've tried using both cssSelector and xpath, but I can't seem to figure out what I'm doin ...

jquerycssseleniumtestingxpath

Display a fresh <p> tag when the condition in the if-statement is met

If you are looking for a questionnaire, check out this one. Now, I am interested in creating if-statements using HTML/CSS/jQuery to achieve the following scenario: Initially, only Question 1 will be visible. When the input matches a certain value like X, ...

jqueryhtmlcssif-statement

the table image does not resize correctly in mobile view

I need to resize an image inside a table's <td> when the screen size is in mobile mode. Although I have already added a viewport, my mobile query works correctly for other purposes except for the image. Here is the HTML code: <table class="t ...

htmlcsstwitter-bootstrap-3media-queries

Is there a way to transfer multiple functions using a single context?

Having created individual contexts for my functions, I now seek to optimize them by consolidating all functions into a single context provider. The three functions that handle cart options are: handleAddProduct handleRemoveProduct handleC ...

javascriptjavahtmlcssreactjs

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

Switch between two AppBars simultaneously while scrolling in Material UI

In my Header.js component, I have two AppBars. The first one is sticky and the second one is not initially visible. As we scroll down, I want the second AppBar to collapse and the first one to stay stickied at the top of the screen. I looked at the Materi ...

javascriptcssreactjsmaterial-uiappbar