How can the parent Flexbox in a nested Flexbox shrink and remain at the top, wrapping to the next line only when the available space is insufficient for display?

What is the best way to ensure that box 1, 2, and 3 stay on the right of box A in a desktop browser, but shift below box A if there isn't enough space (e.g. in a smartphone browser)? I am open to solutions using either Bootstrap 4 or 5.

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

<html lang="en-us">
  <style>
    body, div {font-family: sans-serif; font-size:100px}
  </style>
  <body>
    <div style="display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:flex-start; ">
      <div id="letter" style="background-color:red; min-width:150px; min-height:400px; margin:10px;">A</div>
      <div id="numbers"
           style="display:flex; flex-flow:row wrap;
                  justify-content:flex-start; align-items:flex-start;
                  background-color:yellow">
        <div style="background-color:lightblue; min-width:300px; min-height:200px; margin:10px">1</div>
        <div style="background-color:lightblue; min-width:300px; min-height:180px; margin:10px">2</div>
        <div style="background-color:lightblue; min-width:300px; min-height:150px; margin:10px">3</div>
      </div>
  </body>
</html>
htmlcssbootstrap-4flexboxbootstrap-5

Answer №1

When flex items have the ability to wrap, they will wrap before their width is reduced.

To control this behavior, the only option is to modify the wrap declaration at a specific width using a media query.

@media (max-width: 490px) {
  .container {
    flex-wrap: wrap;
  }
}

A few days ago, I provided a similar answer to a question that was similarly themed.

body {
  font-family: sans-serif;
  font-size: 100px;
}

.container {
  display: flex;
  align-items: flex-start;
}

@media (max-width: 490px) {
  .container {
    flex-wrap: wrap;
  }
}

#letter {
  background-color: red;
  min-width: 150px;
  min-height: 400px;
  margin: 10px;
}

#numbers {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  background-color: yellow;
}

#numbers div {
  background-color: lightblue;
  min-width: 300px;
  margin: 10px;
}

#numbers div:nth-child(1) {
  min-height: 200px;
}

#numbers div:nth-child(2) {
  min-height: 180px;
}

#numbers div:nth-child(3) {
  min-height: 150px;
}
<div class="container">
  <div id="letter">A</div>
  <div id="numbers">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</div>



The Bootstrap framework utilizes media queries for different breakpoints, making it achievable through Bootstrap.

Yesterday, I didn't have time to offer a Bootstrap solution but planned to edit my response today. Even though you've already approved my answer despite Chris Barr's detailed Bootstrap response, I'll still share my suggested tweak to his solution.

With Bootstrap, nesting container elements is essential due to how margin, padding, and Flexbox properties are applied. This is why additional divs are necessary just for row and column classes. Applying gap-* or column-gap-* classes on the same column element can cause issues as the gap increases the column width.

I assume the specified min-height declarations are placeholders and wouldn't be used in a production environment.

Differences between my Bootstrap approach and Chris':

  • container-fluid for full width
  • included row-gap-2 for vertical spacing upon wrapping items
  • altered column breakpoints for letter and numbers
  • removed col-12 since it's already default for children of row

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e4868b8b909790968594a4d1cad7cad5">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row row-gap-2">
  
    <div class="col-sm-4 col-md-3">
      <div id="letter" class="bg-danger" style="min-height:400px;">A</div>
    </div>
    
    <div class="col-sm-8 col-md-9">
      <div id="numbers" class="row row-gap-2 bg-warning">
        <div class="col-md-6 col-lg-4">
          <div class="bg-info" style="min-height:200px;">1</div>
        </div>
        <div class="col-md-6 col-lg-4">
          <div class="bg-info" style="min-height:180px;">2</div>
        </div>
        <div class="col-md-6 col-lg-4">
          <div class="bg-info" style="min-height:150px;">3</div>
        </div>
      </div>
    </div>
    
  </div>
</div>

Answer №2

I believe this solution can be achieved solely using bootstrap classes. I recommend familiarizing yourself with the bootstrap grid system to understand how it operates: Grid Docs and Column Docs

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a8cac7c7dcdbdcdac9d8e89d869b8699">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
  
    <div class="col-3">
      <div id="letter" class="bg-danger" style="min-height:400px;">A</div>
    </div>
    
    <div class="col-12 col-md-9">
      <div id="numbers" class="row bg-warning">
        <div class="col-12 col-md-6 col-lg-4">
          <div class="bg-info" style="min-height:200px;">1</div>
        </div>
        <div class="col-12 col-md-6 col-lg-4">
          <div class="bg-info" style="min-height:180px;">2</div>
        </div>
        <div class="col-12 col-md-6 col-lg-4">
          <div class="bg-info" style="min-height:150px;">3</div>
        </div>
      </div>
    </div>
    
  </div>
</div>

Explanation of Bootstrap Columns

In essence, a row encompasses the only elements that can directly contain columns, which are assigned col-* classes. Do not modify the size of a row or column through styling!

Each row consists of 12 available columns. For instance, if two col-6 elements are present, each will utilize 50% of the space.

<div class="row">  
  <div class="col-6">half</div>
  <div class="col-6">half</div>
</div>

You have flexibility in dividing the columns as long as they sum up to 12. This could include 3 col-4's, a col-6, 2 col-3's, or even 12 col-1's.

If the total exceeds 12, the excess content will wrap to the subsequent line. For example, placing 3 col-6's would display the first two on one line followed by the third on the next line.

Interrupting Columns

You can designate varying column sizes for distinct screen dimensions! Bootstrap defines these screen sizes and you can explore themhere. It is crucial to generate styles from the smallest to largest screens without deviating from this order.

If a column has col-12 col-sm-6 col-md-4, it signifies full width at the smallest size, modifying to half width as the screen enlarges, and eventually occupying 4 columns at larger resolutions.

Nested rows within another row's column are feasible. The concept is straightforward—remember that a row occupies the entire width while columns proportionally dictate their share rather than fixed pixel values.

Answer №3

Yes, it is entirely achievable by simply applying a float:left; to both A[div] and numbers[div]. This will align them as desired. Just ensure that the divs have a display of block for the float property to function properly.

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

The background doesn't quite make it to the bottom of the page

I am experiencing an issue with the white container on top of the yellow background in my design. Despite setting the min-height to 100%, it stops and does not extend properly. Here is the CSS code for this container, and below you can see an image illustr ...

css

Struggling to make images wrap properly using flexbox

I've been struggling to get these images to wrap properly within my container. They keep overflowing beyond the designated width and I'm not sure if it's because I have paragraphs placed under each image. Any ideas on how to make 3 images ap ...

htmlcssflexbox

How to use Python Selenium to locate the parent element

Here is a snippet of my HTML code: <li> <div class="level1"> <div id="li_hw2" class="toggle open" </div> <ul style="" mw="220"> <li> <div class ="l ...

pythonhtmlseleniumxpath

Turn off the nicescroll scroll bar that appears as a default feature

Is there a way to disable the nicescroll scroll bar that appears in red by default on my html page? It's causing issues with zooming in and breaking the layout. ...

javascripthtmltwitter-bootstrapjsp

Guide to positioning a div at the bottom of a Drawer while maintaining the same width as the Drawer in React Material UI

Creating a Drawer on the right-hand side using <Drawer/>, I am trying to make a <div> stick to the bottom of the <Drawer />. The width of this <div> should match the width of the <Drawer />. Desired Outcome: https://i.sstati ...

htmlcssreactjsmaterial-ui

Attempting to highlight a specific list item by using the CSS current class to emphasize its active state

I've been experimenting with different solutions I found in previous questions, but unfortunately, none of them have worked for me. I suspect the issue lies in the fact that the element is deeply nested within CSS classes, and my lack of experience is ...

javascriptcsswordpress

After applying a CSS reset, the styles on two elements appear different in Internet Explorer only due to inconsistencies

Even after implementing a CSS reset, it seems that Internet Explorer is applying default styling to the SUP tag. In this scenario, the SUP tag remains slightly smaller than the styled SPAN tag. Is there a workaround for this issue? <!doctype html> ...

htmlcssinternet-explorer

Creating captivating animations using CSS and HTML input

I am currently in the process of building a website and I am interested in adding an animated search feature to it. I came across this animation that has caught my attention: https://videohive.net/item/search-logo-reveal/19279469?s_rank=149. I was wonderin ...

jqueryhtmlcssanimation

Centering text within a Bootstrap button

I have encountered similar questions and attempted the suggested solutions without success * My custom CSS file is correctly linked 100% to the HTML file I am working on * I am utilizing Bootstrap v4.3.1 * As the heading implies, my goal is to align t ...

htmlcsstwitter-bootstrapbootstrap-4

Achieving the perfect alignment for expandable divs next to a consistently centered element using CSS

On my page, I want to ensure that the logo is always perfectly centered both horizontally and vertically when the page loads without any interactions. To achieve this, I used simple margin properties: margin: auto; position: absolute; top: 0; bottom: 0; ...

htmlcsscss-float

Issue of scrolling on Firefox 3.6 due to CSS page width set to 100%

Strange issue with my website on Firefox 3.6 - there is an unwanted horizontal scroll bar at the bottom even though nothing exceeds 100% of the body width. This problem does not occur in Chrome, Safari, or Firefox 4... Any suggestions? Check out the li ...

htmlcss

The script will not alter the color of a generated div element

section of code, there is a script called BGLinks that handles linking Bible verses to BibleGateway and creating preview popups when hovering over them. The issue at hand is with the css styling of the popup content within the div with the class "bg_popup ...

javascriptcss

The constant increase in page header number leading to minor interruptions during page scrolling

On my website, I have a dynamic page header that shows the number of comments a user has scrolled through. You can see this feature in action here: However, there seems to be a slight jitter on the screen every time the comment counter updates... To disp ...

htmlangularionic-framework

aligning adaptable grid on the screen

Is anybody able to assist me in vertically centering the responsive matrix below so that it is equidistant from the left and right edges of the screen (parent element has a width of 100%)? Any help would be greatly appreciated. Here is my code: <!DOC ...

css

What is the best way to use requests in python to enter text in a textarea, then scrape the html with bs4, all while the input remains hidden?

I'm working on a script that interacts with by sending a string and receiving one or all of the "fancy text" variations provided by the site. I am struggling to identify the input area within the HTML structure, especially since I aim to use requests ...

pythonhtmlseleniumbeautifulsouppython-requests

Having trouble horizontally centering a div with a fixed position?

Is there a way to center a div horizontally inside the browser window while maintaining its vertical position? Below is the div in question: <div id="divErrorMessage" class="ErrorClientSide"> <div class="ui-icon ui-icon-info" style="float: le ...

jqueryhtmlcss

Connect a word in one QMD file to a word in another QMD file with a hyperlink

As I work on creating a Quarto book, I am looking to link key terms in the book to corresponding definitions in a glossary. The challenge is to ensure that these links function properly in both HTML and PDF formats. Below are some methods I have explored s ...

htmlcssrlatexquarto

Looking to extract data from an HTML form?

In my HTML form, I am dynamically creating elements and setting their name and value attributes. When I try to access the value using document.formname.nameoftheelement.value, I receive an error stating that the value is undefined. I then attempted to us ...

javascripthtml

`How can I dynamically hide a collapsible Bootstrap navbar with a click event in a React.js application?`

Hey there! I've managed to create a collapsible navbar with Bootstrap 5 that is working smoothly, but now I want it to automatically close when the user clicks on a link. Is there a way to achieve this in React? Thanks in advance! React.JS navbar : ...

javascriptreactjsbootstrap-5

Ensure that your Bootstrap columns span across the entire width of the row

I'm new to bootstrap and struggling with a simple issue. I want the columns to fill 100% of the width of the row, but I can't figure out how to remove the padding while maintaining the spacing between them. Despite searching for a solution, I ha ...

htmltwitter-bootstrapcssbootstrap-4