If I change the flex-wrap to nowrap in the given code snippet with a width of 33.3333333333%, what would be the new calculation for the width?
.box{
color: white;
font-size: 100px;
text-align: center;
text-shadow: 4px 4px 0 rgba(0, 0, 0, 0, 1);
}
.box1{ background: #1abc9c; }
.box2{ background: #3498db; }
.box3{ background: #9b59b6; }
.box4{ background: #34495e; }
.box5{ background: #f1c40f; }
.box6{ background: #e67e22; }
.box7{ background: #e74c3c; }
.box8{ background: #bdc3c7; }
.box9{ background: #2ecc71; }
.box10{ background: #16ae85; }
/* flex property for parent(container) - start */
/* Wrapping flex items */
.container{
display: flex;
border: 1px solid goldenrod;
height:100vh;
flex-wrap:nowrap; /* changed value */
}
/* flex property for parent(container) - end */
.box{
width: 33.3333333333%; /* New calculation here */
}<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class = "container">
<div class = "box box1">1</div>
<div class = "box box2">2</div>
<div class = "box box3">3</div>
<div class = "box box4">4</div>
<div class = "box box5">5</div>
<div class = "box box6">6</div>
<div class = "box box7">7</div>
<div class = "box box8">8</div>
<div class = "box box9">9</div>
<div class = "box box10">10</div>
</div>
</body>
</html>