Flex items refusing to wrap in a flexbox with a column-direction orientation

Question

Flex items refusing to wrap in a flexbox with a column-direction orientation

In my code, I am using an outerWrapper, innerWrapper, and children. The outerWrapper has a fixed height of 300px and is styled with display: flex. Similarly, the innerWrapper also has a style of display: flex with flex-direction: column.

However, when I apply the align-items property to the outerWrapper with anything other than stretch, the children display in a single long column, disregarding the specified 300px height. See the image here:

https://i.sstatic.net/X5ieN.png

Instead, I want them to be displayed as shown in this image:

https://i.sstatic.net/osL0x.png

The desired outcome can be achieved by simply applying align-items: flex-end.

To address this issue, the solution involves setting a height of 210px for the innerWrapper. However, this value needs to be dynamically calculated using JavaScript due to the variable number of child elements.

I attempted the following code snippet:

innerWrapper.style.height = (lastChild.offsetTop - innerWrapper.offsetTop + lastChild.offsetHeight) + 'px';

Unfortunately, this did not resolve the issue as it only resulted in a height calculation based on the individual box dimensions.

How can I accurately set the height of innerWrapper using JavaScript while preserving the flexibility needed for aligning items?

JSFiddle

javascript html css flexbox

Answer 1

Answer №1

You have specified a height for #outerWrapper: height: 300px.

To ensure the child element – #innerWrapper – has an equal height, set it to height: 100%. This will make them wrap properly.

If you want the items to be positioned at the bottom of the container, apply flex auto margins to the odd-numbered items.

Include an invisible pseudo-element to ensure that the last odd-numbered item is always aligned with the top row.

#outerWrapper {
    height: 300px;
    background-color: lightgreen;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
}

ul {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    height: 100%;                           /* NEW */
}

li {
    list-style-type: none;
    width: 100px;
    height: 100px;
    background-color: lightblue;
    border: 1px solid;
}

li:nth-child(odd) { margin-top: auto; }      /* NEW */

ul::after {
    content: "";                              /* NEW */
    width: 100px;                             /* NEW */
    height: 100px;                            /* NEW */
    border: 1px solid;                        /* NEW */
    visibility: hidden;                       /* NEW */
}

<div id="outerWrapper">
    <ul id="innerWrapper">
        <li class="child">I'm #01</li>
        <li class="child">I'm #02</li>
        <li class="child">I'm #03</li>
        <li class="child">I'm #04</li>
        <li class="child">I'm #05</li>
    </ul>
</div>

Revised Fiddle

Answer 2

You have specified a height for #outerWrapper: height: 300px.

To ensure the child element – #innerWrapper – has an equal height, set it to height: 100%. This will make them wrap properly.

If you want the items to be positioned at the bottom of the container, apply flex auto margins to the odd-numbered items.

Include an invisible pseudo-element to ensure that the last odd-numbered item is always aligned with the top row.

#outerWrapper {
    height: 300px;
    background-color: lightgreen;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
}

ul {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    height: 100%;                           /* NEW */
}

li {
    list-style-type: none;
    width: 100px;
    height: 100px;
    background-color: lightblue;
    border: 1px solid;
}

li:nth-child(odd) { margin-top: auto; }      /* NEW */

ul::after {
    content: "";                              /* NEW */
    width: 100px;                             /* NEW */
    height: 100px;                            /* NEW */
    border: 1px solid;                        /* NEW */
    visibility: hidden;                       /* NEW */
}

<div id="outerWrapper">
    <ul id="innerWrapper">
        <li class="child">I'm #01</li>
        <li class="child">I'm #02</li>
        <li class="child">I'm #03</li>
        <li class="child">I'm #04</li>
        <li class="child">I'm #05</li>
    </ul>
</div>

Revised Fiddle

Answer 3

Answer №2

To maximize the layout of the flexbox container, consider incorporating the height attribute:

ul {
    ...
    height: 100%;
}

Answer 4

To maximize the layout of the flexbox container, consider incorporating the height attribute:

ul {
    ...
    height: 100%;
}

Answer 5

Answer №3

To achieve the desired layout, adjustments need to be made to both the outerWrapper and menu element which have flex positioning. I have updated a fiddle to demonstrate the behavior you seek in the second image:

Updated Fiddle Link

#outerWrapper {
  width: 100%;
  height: 300px;
  background-color: lightgreen;
  display: flex;
  justify-content: center;
  align-items: center;
}

ul {
  height: 250px;
  width: 300px;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
}

li {
  list-style-type: none;
  width: 100px;
  height: 100px;
  background-color: lightblue;
  border: 1px solid;
}

I set specific dimensions for the ul to ensure proper wrapping of children elements. Feel free to reach out if you have any questions!

Answer 6

To achieve the desired layout, adjustments need to be made to both the outerWrapper and menu element which have flex positioning. I have updated a fiddle to demonstrate the behavior you seek in the second image:

Updated Fiddle Link

#outerWrapper {
  width: 100%;
  height: 300px;
  background-color: lightgreen;
  display: flex;
  justify-content: center;
  align-items: center;
}

ul {
  height: 250px;
  width: 300px;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
}

li {
  list-style-type: none;
  width: 100px;
  height: 100px;
  background-color: lightblue;
  border: 1px solid;
}

I set specific dimensions for the ul to ensure proper wrapping of children elements. Feel free to reach out if you have any questions!

Flex items refusing to wrap in a flexbox with a column-direction orientation

JSFiddle

Answer №1

Answer №2

Answer №3

Similar questions

Tips for extracting values from a JSON object

Tips for incorporating a hyperlink into a pop-up box

Guide for implementing async/await in conjunction with the eval() function within JavaScript

React with Typescript: Issue with mapping array not displaying all elements

Focus on targeting dynamic IDs such as #event_rules_attributes_0_interval, #event_rules_attributes_1_interval, etc. using CSS3 styling

What is the best way to retrieve the value of a textbox in AngularJS?

What is the reason behind Angular not allowing users to define @Output events that begin with 'on'?

Is there a way to display one of the divs in sequence each time the page is reloaded?

Is there a way to retrieve the values of all identical properties within an object?

Identify the mouse's location in relation to its parent element, not the entire webpage

Can the identical script be implemented by utilizing two separate JavaScript files?

Utilize a unique CSS selector and content property to insert a space character between two inline-block elements

Updating parts of a list using AJAX

Why does my paragraph consistently fall behind my button no matter what?

Is it a common issue that sound.stop() doesn't seem to function properly, while sound.play() operates successfully within Howler

Unable to retrieve an array in SAPUI5 and assign it to a JSONModel

Display the quantity of stock in WooCommerce as separate numerical values

Trouble displaying certain HTML code and its output on the browser?

How to obtain the value of TR in JavaScript?

"Enhance your Vue.js application with the powerful capabilities of vue3-easy