Os itens se comportam como se tivessem a propriedade flex-shrink: 0; não diminuindo de 200px. (como visto na atividade anterior tem o mesmo efeito). Contudo, se for estabelecido a width do container em 100vw; passa a funcionar. Acredito que seja assim, pois, se não for estabelecido a width, ela assume o valor da soma dos itens, dessa maneira, ficando sempre em 800px. Em contra partida, ao colocar 100vw, ela se adapta ao tamanho da tela, fazendo com que os itens mudem para permanecer dentro do container.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="Diminuindo-proporcionalmente-os-elementos.css"
/>
<title>Diminuindo proporcionalmente os elementos</title>
</head>
<body>
<main class="flexContainer">
<div class="flexItem firstRow red"></div>
<div class="flexItem firstRow green"></div>
<div class="flexItem firstRow yellow"></div>
<div class="flexItem firstRow brown"></div>
</main>
</body>
</html>
.flexContainer {
display: flex;
/* se remover a linha seguinte, os itens param de mudar o tamanho */
width: 100vw;
}
.flexItem {
height: 50px;
width: 200px;
}
.flexContainer :nth-child(1){
background: red ;
}
.flexContainer :nth-child(2){
background: blue;
}
.flexContainer :nth-child(3){
background: green;
}
.flexContainer :nth-child(4){
background: yellow;
}
body{
margin: 0;
display: flex;
align-items: center;
}
