Flexbox keeps elements on the same line without breaking

I'm currently delving into flexbox and aiming to create a layout similar to the one shown below:

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

Here is the code I have come up with:

.container {
  display: flex;
  gap: 26px;
}

.flex50 {
  flex: 50%;
  flex-wrap: wrap;
  min-width: calc(50% - 13px);
  background-color: #000000;
  margin-bottom: 26px;
}

.flex33 {
  flex: 33.33333%;
  flex-wrap: wrap;
  min-width: 33.33333%;
  background-color: #000000;
  margin-bottom: 26px;
}
<div class="container">
  <div class="flex50">
    1 50
  </div>
  <div class="flex50">
    2 50
  </div>
  <div class="flex33">
    1 33
  </div>
  <div class="flex33">
    2 33
  </div>
  <div class="flex33">
    3 33
  </div>
  <div class="flex33">
    4 33
  </div>
</div>

However, it seems that the line breaks are not functioning as expected. Can anyone point out where I might be going wrong?

htmlcssflexbox

Answer №1

Make sure to include the flex-wrap: wrap property in the .container class so that the flex items can wrap themselves when they exceed the viewport boundaries.

.container{
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
}
.flex50{
    flex: 50%;
    flex-wrap: wrap;
    min-width: calc(50% - 13px);
  background-color: #000000;
    margin-bottom: 26px;
}
.flex33{
    flex: 33.33333%;
    flex-wrap: wrap;
    min-width: 33.33333%;
    background-color: #000000;
    margin-bottom: 26px;
}
<div class="container">
    <div class="flex50">
        1 50
    </div>
    <div class="flex50">
        2 50
    </div>
    <div class="flex33">
        1 33
    </div>
    <div class="flex33">
        2 33
    </div>
    <div class="flex33">
        3 33
    </div>
    <div class="flex33">
        4 33
    </div>
</div>

Answer №2

To ensure the flex elements wrap when they exceed the viewport width, add the flex-wrap: wrap property to the .container class.

.container{
    height: 20rem; /* set a specific height as needed */
    display: flex;
    flex-wrap: wrap; 
}
.flex50{
    flex-basis: 50%;
    background-color: #000000;
    margin-bottom: 26px;
    margin: 0.5rem; /* provides spacing between elements */
    max-width: calc(50% - 1rem); /* includes margin in element's width calculation */
}
.flex33{
    flex-basis: 33.33333%;
    background-color: #000000;
    margin-bottom: 26px;
    margin: 0.5rem; /* provides spacing between elements */
    max-width: calc(33.3333% - 1rem); /* includes margin in element's width calculation */
}
<div class="container">
    <div class="flex50">
        1 50
    </div>
    <div class="flex50">
        2 50
    </div>
    <div class="flex33">
        1 33
    </div>
    <div class="flex33">
        2 33
    </div>
    <div class="flex33">
        3 33
    </div>
    <div class="flex33">
        4 33
    </div>
</div>

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

What is the best way to ensure that the larger child divs always fit perfectly within the parent div?

Creating a Responsive Layout <div class="container"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> CSS Styling .box1, .box2, .box3{ display: block; f ...

javascriptjqueryhtmlcss

extracting an attribute from a class's search functionality

Let's consider the following HTML structure: <div id="container"> <div> <div class="main" data-id="thisID"> </div> </div> </div> If I want to retrieve the value inside the data-id attribute ...

javascriptjquerycss

Using the Loop Function in Node.js with EJS Templates

Seeking help with a node.js application that utilizes bootstrap. I am trying to display the bootstrap cards in rows of 3, with each row containing data from my dataset in columns. However, my current implementation using two for loops is leading to repeate ...

javascripthtmlnode.jsexpressejs

What is the best way to effectively incorporate Bootstrap into an HTML project?

Here is the code snippet I am working with: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name ...

pythonhtmldjangobootstrap-5

What is the best method for binding variables in Vue.JS using moustache syntax and passing parameters to them?

If I have an HTML structure like this: <div> {{ CUSTOM_MESSAGE }} </div> And in my data: data() { return { CUSTOM_MESSAGE: 'Hey there! This message is for {{name}} from {{location}}' } } Is there a way to dynamically p ...

javascripthtmlvue.jsvuetify.js

Is there a way to stop the MUI Select component's width from increasing when I choose multiple options?

Please check out the demo I created on codesandbox by clicking here View codesandbox demo I have implemented the MUI Select component with various props to enable multiple options selection without a fixed width constraint. Using a grid layout, I have ev ...

cssmaterial-uicss-grid

Display multiple values in a select dropdown using Bootstrap 5 properties

I am stuck with the following code<hr> HTML <select id="select" placeholder="Choose Select" class="selectpicker" multiple></select> <div class="container"> <div id="all" clas ...

javascripthtmlbootstrap-5bootstrap-selectbootstrap-selectpicker

Having trouble with jQuery UI draggable when using jQueryUI version 1.12.1?

Currently, I am diving into the world of jQuery UI. However, I am facing an issue with dragging the boxes that I have created using a combination of HTML and CSS. My setup includes HTML5 and CSS3 alongside jQuery version 1.12.1. Any suggestions or help wou ...

javascriptjqueryhtmlcssjquery-ui

implement adding a division element to the DOM using the append

I am facing an issue with this particular code. The intended functionality is to create multiple divs in a loop, but it seems to be dysfunctional at the moment. Upon clicking, only one div appears and subsequent clicks don't trigger any response. < ...

javascripthtmlcss

Transform your standard HTML buttons into a collective of radio buttons

Looking for a way to make some ordinary buttons function as radio buttons without adding another library to the project. Any suggestions on how this can be achieved using just HTML and JavaScript/jQuery? Appreciate any help, thank you. ...

javascriptjqueryhtml

Empty area beneath the body in Chrome Device Mode

Can anyone explain why there is a strange blank space under the body tag in mobile view on Chrome (other browsers like Firefox and Internet Explorer display it correctly)? Here is the simple code that I am using: <html> <meta name="viewport" con ...

javascripthtmlcss

Guide to updating information inside of script tags in html using javascript

Within my HTML, there is a script tag that looks like this: <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "VideoObject", "name": "Title", "description": "Video descrip ...

javascripthtmlangularjsmean-stackmean

How can the border of the select element be removed when it is active in select2

After examining the CSS code, I am still unable to locate the specific property that is being applied to the main element. I am currently customizing the select2 library to suit my needs. However, I am stuck in the CSS as I cannot determine which property ...

javascripthtmlcssangularjsangularjs-select2

Is it possible to retrieve information from a json file?

I am looking to extract specific elements from a JSON response fetched using the YouTube API. Here is an example of the response I receive in my script: { "version": "1.0", "encoding": "UTF-8", "feed": { // Details of the feed... } } My goal ...

javascripthtmljsonparsing

Challenging glitch in the JavaScript code

My jQuery code seems to be functioning properly in online text editors like Fiddle and StackOverflow snippets. However, when I try to implement the same code in Brackets or view it on GitHub, the navbar scroll down animation fails to work as expected. You ...

javascripthtmlcss

Trigger the callback function once the datatables DOM element has finished loading entirely

Hello there! I have a question regarding datatables. Is there any callback function available that is triggered after the datatables DOM element has finished loading? I am aware of the callbacks fnInitComplete, but they do not serve my purpose. Specificall ...

javascriptjqueryhtmlcssdatatables

What steps do I need to follow in order to utilize Express Generator to create a node skeleton with an HTML view

Is there a way to create a skeleton for Node.js using Express generator with an HTML view engine? For example, we typically do npm install -g express-generator express -v pug but it seems we cannot create a skeleton for express -v html ...

htmlnode.jsexpressexpress-generator

modifying input field with radio button selection in Jquery

Is there a way to set the input field to have a default value and then change it, or disable it with a different value? $("#tax").value(19).prop("disabled",false); $("#tax").value(0).prop("disabled",true); <script src="https://ajax.googleapis.com/aj ...

javascriptjqueryhtml

storing a value in the browser's local storage

I am in the process of creating a new game that includes a high score feature. The idea is that when the current score surpasses the existing one stored locally, it will be replaced: localStorage.setItem('highScore', highScore); var HighScore = ...

javascripthtmllocal-storage2d-games

Show various attachment file names using jQuery

Utilizing jQuery, I've implemented a script to extract the filename from a hidden field and then append it to the filename class in my HTML. filenameCache = $('#example-marketing-material-file-cache').val().replace(/^.*[\\\/ ...

javascriptjqueryhtml