Flexbox not achieving equal height

Question

Flexbox not achieving equal height

Having trouble making flexbox work with Susy? Here's what I've tried so far.

I've experimented with various solutions found here, but couldn't get it to work consistently across different screen sizes. The heights of text containers and image containers seem to break, especially on mobile views larger than 38em.

Whenever I apply display: flex to the items within the container, they appear in a single row instead of being stacked as intended.

I also noticed that I need to use display properties for the images as well...

Check out my code here

<div class="l-wrap-page">
    <!-- Start Main Content Wrapper -->
    <div class="l-wrap-main">
        <!--  Start Quote -->
        <div class="c-quote">
            <h2 class="c-quote__title">Quote</h2>
            <div class="c-quote__content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
            <button class"o-btn">mehr</button>
        </div>
        <!-- End Quote -->
        <!-- Start Content Block -->
        <div class="c-block">
            <div class="c-block__item">
                <div class="o-media">
                    <img src="http://dummyimage.com/650x325/000/fff" alt="">
                </div>
            </div>
            <div class="c-block__item">
                ...

<p>CSS:</p>

<pre><code> ...

html css flexbox

Answer 1

Answer №1

When you establish a flex container (display: flex or display: inline-flex), it automatically comes with various default settings. Here are some of them:

justify-content: flex-start - flex items will stack at the beginning of the line
flex-wrap: nowrap - flex items are constrained to remain in a single line
flex-shrink: 1 - flex items can shrink if necessary
align-items: stretch - flex items will stretch to cover the cross-size of the container
flex-direction: row - flex items will align horizontally

Take note of the last setting. To make your flex items stack vertically, you can override this default setting (on the container) by using flex-direction: column.

Alternatively, you could enable wrapping (flex-wrap: wrap) and assign enough width to each item to force it onto the next line. For instance, applying width: 100% to each item along with wrap on the container can generate a single column of flex items.

If you want more information on achieving equal height columns with flexbox, check out these resources:

Equal Height Columns with Flexbox
Equal height rows in a flex container

In this scenario, consider updating the .c-block rule in this manner:

Updated codepen

.c-block {
  display: flex;            /*  added property  */
  flex-wrap: wrap;          /*  added property  */
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

Answer 2

When you establish a flex container (display: flex or display: inline-flex), it automatically comes with various default settings. Here are some of them:

justify-content: flex-start - flex items will stack at the beginning of the line
flex-wrap: nowrap - flex items are constrained to remain in a single line
flex-shrink: 1 - flex items can shrink if necessary
align-items: stretch - flex items will stretch to cover the cross-size of the container
flex-direction: row - flex items will align horizontally

Take note of the last setting. To make your flex items stack vertically, you can override this default setting (on the container) by using flex-direction: column.

Alternatively, you could enable wrapping (flex-wrap: wrap) and assign enough width to each item to force it onto the next line. For instance, applying width: 100% to each item along with wrap on the container can generate a single column of flex items.

If you want more information on achieving equal height columns with flexbox, check out these resources:

Equal Height Columns with Flexbox
Equal height rows in a flex container

In this scenario, consider updating the .c-block rule in this manner:

Updated codepen

.c-block {
  display: flex;            /*  added property  */
  flex-wrap: wrap;          /*  added property  */
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

Flexbox not achieving equal height

Answer №1

Similar questions

What is preventing me from changing the text color of this span element to white?

Adjust the height of the card body to match the horizontal bootstrap 5 card image

Is there a way to ensure that HTML5 audio is responsive when using Bootstrap?

CSS method for creating designs surrounding text

Trouble with search box images on Internet Explorer causing confusion

How can I make all fields in the CKAN Resource form html the same size as the "Description" field?

HTML - Toggle visibility of div using display property

Create a scrollable horizontal list of items

Deleting a li element within an AJAX response function can be accomplished by targeting the specific

The Bootstrap-Select dropdown refuses to open

Android phone experiencing issues with custom search engine functionality

Position the button at the bottom right corner of the form

PHP-generated HTML often contains unnecessary and excessive indentation

When converting a block formatting context into a block, the margin does not collapse

What is the method for inserting a newline into a textarea with an HTTPRequest?

Using JavaScript to transfer the data ID from a button to a form

Issue with rendering components list in React.js

Troubleshooting a Problem with CSS Div Multi-column Formatting

Revise Bootstrap accordion setup

I am encountering an issue with opening a dropdown select option upon clicking in C# while using Selenium