What is the best way to make sure flexbox items fill in any available space?

Question

What is the best way to make sure flexbox items fill in any available space?

I am currently working on a website project, and I am looking to display text content in two columns using flexbox with each column taking up 50% of the width. However, I am encountering an issue as illustrated in the image below:

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

Instead of leaving the third div empty and disrupting the layout of the page, I want it to fill the space below the second div.

Below is a sample code snippet that showcases the problem:

#container {
                    display: flex;
                    flex-wrap: wrap;
                }

                .d {
                    box-sizing: border-box;
                    font-size: 24px;
                    width: 50%;
                    padding: 25px;
                    text-align: justify;
                }

<div id="container">
                    <div class="d" id="d1">
                        <!-- Content for div d1 -->
                    </div>
                    <div class="d" id="d2">
                        <!-- Content for div d2 -->
                    </div>
                    <div class="d" id="d3">
                        <!-- Content for div d3 -->
                    </div>
                    <div class="d" id="d4">
                        <!-- Content for div d4 -->
                    </div>
                </div>

If you prefer, here is a CodePen link: link

html css flexbox

Answer 1

Answer №1

Using 'flex-box' is not necessary in this case, you can achieve the desired behavior by floating elements.

Add float: left to the .d class to fill the gap as needed.

If you want the div with the number 4 to be on a separate row, you can use clear: both / left / right.

#container {
}

.d {
  box-sizing: border-box;
  font-size: 24px;
  width: 50%;
  padding: 25px;
  float: left;
  text-align: justify;
}

<div id="container">
  <div class="d" id="d1">
    1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111
    111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111
    1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111
  </div>
  <div class="d" id="d2">
    222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22
  </div>
  <div class="d" id="d3">
    3333 33 3 333 33 333 3333 333 3333 33 3 333 33 333 3333 333 3333 33 3 333 33 333 3333 333 3333 33 3 333 33 333 3333 333 3333 33 3 333 33 333 3333 333
  </div>
  <div class="d" id="d4">
    444 4 4 4 4 4444 4444 4444 44 444 4 4 4 4 4444 4444 4444 44 444 4 4 4 4 4444 4444 4444 44 444 4 4 4 4 4444 4444 4444 44 444 4 4 4 4 4444 4444 4444 44
  </div>
</div>

Answer 2

Using 'flex-box' is not necessary in this case, you can achieve the desired behavior by floating elements.

Add float: left to the .d class to fill the gap as needed.

If you want the div with the number 4 to be on a separate row, you can use clear: both / left / right.

#container {
}

.d {
  box-sizing: border-box;
  font-size: 24px;
  width: 50%;
  padding: 25px;
  float: left;
  text-align: justify;
}

<div id="container">
  <div class="d" id="d1">
    1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111
    111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111
    1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111
  </div>
  <div class="d" id="d2">
    222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22
  </div>
  <div class="d" id="d3">
    3333 33 3 333 33 333 3333 333 3333 33 3 333 33 333 3333 333 3333 33 3 333 33 333 3333 333 3333 33 3 333 33 333 3333 333 3333 33 3 333 33 333 3333 333
  </div>
  <div class="d" id="d4">
    444 4 4 4 4 4444 4444 4444 44 444 4 4 4 4 4444 4444 4444 44 444 4 4 4 4 4444 4444 4444 44 444 4 4 4 4 4444 4444 4444 44 444 4 4 4 4 4444 4444 4444 44
  </div>
</div>

Answer 3

Answer №2

If you're searching for it, check out the CSS Multi-column Layout resource. (tutorial)

Flex helps in creating element columns or rows without spanning through.

To achieve this:

Set the direction to column.
Adjust the height of the container to trigger wrapping to next columns when the first column is filled.

Grid allows spanning but needs to be set accordingly.

Float can also be used as proposed by Felix Mosheev.

#container {
  column-count: 2;
  column-fill:balance
}

.d {
  box-sizing: border-box;
  font-size: 24px;
  padding: 25px;
  text-align: justify;
}

<div id="container">
  <div class="d" id="d1">
    Content goes here
  </div>
  <div class="d" id="d2">
    More content here
  </div>
  <div class="d" id="d3">
    Additional content here
  </div>
  <div class="d" id="d4">
    Extra content here
  </div>
</div>

Answer 4

If you're searching for it, check out the CSS Multi-column Layout resource. (tutorial)

Flex helps in creating element columns or rows without spanning through.

To achieve this:

Set the direction to column.
Adjust the height of the container to trigger wrapping to next columns when the first column is filled.

Grid allows spanning but needs to be set accordingly.

Float can also be used as proposed by Felix Mosheev.

#container {
  column-count: 2;
  column-fill:balance
}

.d {
  box-sizing: border-box;
  font-size: 24px;
  padding: 25px;
  text-align: justify;
}

<div id="container">
  <div class="d" id="d1">
    Content goes here
  </div>
  <div class="d" id="d2">
    More content here
  </div>
  <div class="d" id="d3">
    Additional content here
  </div>
  <div class="d" id="d4">
    Extra content here
  </div>
</div>

What is the best way to make sure flexbox items fill in any available space?

Answer №1

Answer №2

Similar questions

Using htaccess to eliminate PHP and HTML files from your website

What is the best way to arrange flex elements in distinct columns for stacking?

Can anyone suggest a more efficient method for implementing jQuery toggle?

What steps can I take to stop my html table from expanding beyond its intended size

Is there a way to showcase a block of Python code using a combination of HTML, CSS, and Javascript to enhance its

Grab all the text using Java Jsoup

modify the color of a particular div element in real-time

The close button within the modal is malfunctioning even with the implementation of the on() function

Disabling CSS transitions and attempting to alter the style of an HTML element using JavaScript may not consistently work as expected

Using jQuery to create a dynamic fullscreen background image that responds to mouse movement

Make sure all Bootstrap elements have square edges

Finding out the specific row that was clicked in a Jquery Mobile listview

Tips for Eliminating Unnecessary Space Above the Navigation Bar

What is the best way to ensure DIVs or SPANs have a fixed width with their content while also utilizing the remaining available space with white space?

Update the appearance of an element in real-time using VUEJS

Issue with disabled button in Angular 2 when using Chrome's autocomplete feature

Tips for creating a div that is consistently 80% of the page height and perfectly square

Several bootstrap dropdown menus - issue with menu not closing when switching between them

Images with full-width will scroll horizontally

Build a Container Div using DOM/XPATH techniques