problems resizing an element

Question

problems resizing an element

Asked 2 years, 10 months ago

Viewed 45 times

-2

I’m doing some flexbox tests and I came across a certain problem. When defining body as flex, the Divs within Section do not resize when setting their size to width. But if we remove the flex from the body, resizing occurs.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .container {
        flex: 0 1 960px;
        display: flex;
        height: 300px;
        margin: 0 auto;
        background-color: tomato;
      }
      body {
        height: 100vh;
        width: 100%;
        display: flex;
      }
      .primeiro {
        margin-left: 50px;
        text-align: center;
        width: 250px;
        height: 50px;
        background-color: turquoise;
      }
    </style>
  </head>
  <body>
    <section class="container">
      <div class="primeiro">ola</div>
      <div class="primeiro">hy</div>
    </section>
  </body>
</html>

Let’s go continue this discussion in chat.

– flexUser

2021/08/16 at 20:13
1

To proceed with the doubt is important [Dit] and exchange the code for a [mcve] of the problem. To understand what kind of question serves the site and, consequently, avoid closures and negativities worth reading What is the Stack Overflow and the Stack Overflow Survival Guide (summarized) in Portuguese.

– Bacco

2021/08/17 at 16:09

1 answer

Browser other questions tagged css html5 css3 flexbox

You are not signed in. Login or sign up in order to post.

by Hozeis • **251** points · Answer 1 · 2021-08-16T21:34:04+00:00

Vamo la. Your original code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .container {
        flex: 0 1 960px;
        display: flex;
        height: 300px;
        margin: 0 auto;
        background-color: tomato;
      }
      body {
        height: 100vh;
        width: 100%;
        display: flex;
      }
      .primeiro {
        margin-left: 50px;
        text-align: center;
        width: 250px;
        height: 50px;
        background-color: turquoise;
      }
    </style>
  </head>
  <body>
    <section class="container">
      <div class="primeiro">ola</div>
      <div class="primeiro">hy</div>
    </section>
  </body>
</html>

This version of your code does not resize pq when Voce places display: flex within the body Voce is defining the Components within the body should be organized within a row with a predetermined size of 960px Voce determines when I set the value flex: 0 1 960px; inside the container. So if Voce minimize the screen it will always stay with a fixed size of 960px.

jsfiddle - first version of the code

Now when Voce changes its code to:

.container { 
/* flex: 0 1 960px;  */
display: flex; 
height: 300px; 
margin: 0 auto; 
max-width: 960px; 
background-color: tomato; 
} 
body { 
height: 100vh; 
width: 100%;
/* display: flex; */
}

You are removing display: flex, this removes that particular size from 960px, releasing the <section class="container"> to minimize. If you go and put minWidth: 960 within the class container you will see that it compacts in the same way as when you were with display:flex within the body.

At this point you minimize the screen enough See that the items .primeiros begin to change size. Plus this and pq Voce has this using value flex within the .container and he’s keeping the values within a row within the size of the screen that is like 100%. margin-left also takes preference than the empty space inside the div.

I believe this and your question. If you want more clarification send me a message that update the answer.