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