CODEWITHSUNDEEP
htmlcssflexbox
Jack Trowbridge
Jack Trowbridge

Reputation: 43

Flexbox shrinking divs instead of wrapping on resize

I have a flexbox set up as follows: 

.box-1 {background: #e51400;}
.box-2 {background: #fa6800;}
.box-3 {background: #f0a30a;}
.box-4 {background: #e3c800;}
.box-5 {background: #a4c400;}
.box-6 {background: #60a917;}

.box {
    font-size: 50px;
    color: white;
    padding: 10px;
    width: 300px;
    height: 300px;
        
  }

/*  LAYOUT STYLES */
.container {
  display: flex;
  border: 8px solid black;
  height: 80vh;
  width: 80vw;
  flex-wrap: wrap;
  flex-direction: row;
}
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="main.css">
    </head>
    <main>
        <section class="container">
            <div class="box box-1">1</div>
            <div class="box box-2">6</div>
            <div class="box box-3">3</div>
            <div class="box box-4">4</div> 
            <div class="box box-5">5</div>
            <div class="box box-6">6</div>
          </section>
    </main>
      
</html>

I would expect the boxes to wrap around and create new rows when I shrink the width of the page. This does happen, but only when I use Firefox's Responsive Design Mode with "Touch Simulation" disabled:

enter image description here

However, when I run this with touch simulation enabled (seems like this is the default), or I use Chrome's developer tools, the boxes remain two to a row and just shrink in width:

enter image description here

(Sorry, I don't have enough reputation to embed images)

Why is this happening?

EDIT: Accepted Rene van der Lende's answer below.

Other resources:

Related SO thread with html to disable this behavior on mobile

Youtube video explaining meta viewport

Upvotes: 3

Views: 276

Answers (1)

Rene van der Lende
Rene van der Lende

Reputation: 5281

In simulation mode the browser scales down your webpage as if it were on a specific mobile device. In 'normal' mode, your entire browser viewport is used, but clipped/restricted to the selected device without scaling down. Think large browser window versus a small one...

So, the behaviour you see is correct!

Upvotes: 1

Related Questions