<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My CSS experiment</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="box">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
</body>
</html>
css file:
.box {
width: 300px;
height: 300px;
border: 5px dotted lightcoral;
display: flex;
}
.box div {
width: 200px;
height: 100px;
border: 1px solid red;
}
here the width of the flex items is more than the flex container size but still the items do not overflow on the main axis. When I inspect the element I notice that the width of the flex items is 100px, but i have given them a width of 200px. So why is browser not giving the flex items a width of 200px?
The link I am following is : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox