problems resizing an element

Asked

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>

1 answer

-1


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.

  • I saw your answer and found it quite interesting. But it generates a debt that is, if the container has a flex: 0 1 960px, that means that the shirink is activated and the container can decrease, but because your children . first they cannot ?

  • The value flex: 0 1 960px and a property of .container and is not passed on to .primeiro. If Voce wanted to pass on the ability to minimize to the "children" component of .container. Barter width of .primeiro for flex: 0 1 250px; and Voce will decrease too.

Browser other questions tagged

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