ARTICLE AD BOX
I'm creating a simple nested flex structure with a .wrapper (green border) that will contain 1+ .group (red border).
Flex has been applied to .wrapper so that .groups stack horizontally.
.group has flex applied so that its .items stack horizontally.
What happens is that .group gets to a width smaller than its items; I'd expect it to either adjust to its items width or to fill the flex parent.
My questions:
Why does this happen?
How can I make the .group adjust to the width of its content?
In case you were interested in the context, I was following this tutorial for a css only carousel.
Thank you in advance!
body {
box-sizing: border-box;
}
.wrapper {
width: 90%;
margin: 100px auto;
display: flex;
border: 4px solid green;
}
.group {
display: flex;
gap: 10px;
border: 4px solid red;
}
.item {
background-color: lightblue;
flex: 0 0 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<div class="group">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
</div>
</body>
</html>
![My very first code to my school project, be kind to me and please help me [closed]](https://stackoverflow.com/Content/Sites/stackoverflow/Img/apple-touch-icon@2.png?v=0f0cab681579)