Question 233330 in Html Question posted in
Some basic documentation can be found here.

Html – In nested Flexbox, how to make a parent FlexBox to shrink and stay at the top and only wrap to next line if there is not enough room to show

In the example below, I have defined Flexbox instead another Flexbox. For box 1, 2, and 3, I want them to stay on the right of box A (e.g. in desktop browser), and only shows them below box A if there is not enough space to show on the right of box A (e.g. in a smartphone browser). What trick do I need to achieve it?

I am open for solutions using Bootstrap 4 or 5.

enter image description here

<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>
Tags:

2

Answers


  1. 0

    it’s possible, all you have to do is to give the both A[div] and numbers[div] a float:left; then every thing will be just like you want it. but be sure divs have a display of block otherwise the float won’t work.

    Login or Signup to reply.
  2. 0

    If flex items are allowed to wrap, the items will wrap before their width is reduced.

    The only way to control the behavior of nested flexboxes is to change the wrap declarations using a media query.

    .container {
  flex-wrap: wrap;
}

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

    I gave a similar answer to a similar question a couple of days ago.

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

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

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

#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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search