Check out this code snippet:
.flex-container {
border: solid 1px purple;
display: flex;
}
.flex-container div {
border: solid 1px red;
padding: 20px;
margin: 20px;
height: 100px;
flex: 1 1 0%;
}
.flex-container .first {
border: solid 1px blue;
flex: 3 1 0%;
}
.first {
border: solid 1px orange;
background-color: brown;
}
.second, .third {
border: solid 1px green;
flex: 1 1 0%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="flex-container">
<div class="first">
First
</div>
<div class="second">
Second
</div>
<div class="third">
Third
</div>
</div>
<div class="first">Last</div>
</body>
</html>I noticed something odd when adding .flexcontainer to the .flex-container .first {} selector. The flex property didn't behave as expected with flex: 3 1 0%. However, changing it to just .first worked fine and also changed the background color of the box. Is there a particular reason for this behavior? I'm still getting the hang of all the basics.