Question about flex will not fill the width of the parent container - css

Question

.outside {
/* Note line3, the top and bottom will be the same, why add the flex on the different */
display: flex;
}
.content {
background: skyblue;
display: flex;
flex-wrap: wrap;
}
.item {
width: 20%;
}
<div class="outside">
<div class="content">
<div class="item">apple</div>
<div class="item">apple</div>
<div class="item">apple</div>
<div class="item">apple</div>
<div class="item">banana</div>
<div class="item">banana</div>
<div class="item">banana</div>
</div>
</div>
========
<div class="content">
<div class="item">apple</div>
<div class="item">apple</div>
<div class="item">apple</div>
<div class="item">apple</div>
<div class="item">banana</div>
<div class="item">banana</div>
<div class="item">banana</div>
</div>
the screenshot is how the two cases work
enter image description here
Questions:
I don't know why the with of element with class outside do not fill the screen(like the element with class content)
I would like to know on what basis the 20% of item is calculated

Answer 1

Whenever you specify display: flex on an element, you're inherently adding the following styling to the child elements:
.child {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}
In the top example, this gets applied to the element with class 'content'. If you were to set flex-grow: 1 on the style block for .content, you would see it take up the whole width.
In your current example, the 20% width is determined from the width of the element with class 'content'.

Answer 2

You have .content inside .outside.
And you set display: flex; for .outside, which changes the width of .content (flex changes widths of children). It is now a single element in the flex row. If you set width: 100%; for .content it will fill that row.
.outside {
/* Note line3, the top and bottom will be the same, why add the flex on the different */
display: flex;
}
.content {
background: skyblue;
display: flex;
flex-wrap: wrap;
width: 100%;
}
.item {
width: 20%;
}
<div class="outside">
<div class="content">
<div class="item">apple</div>
<div class="item">apple</div>
<div class="item">apple</div>
<div class="item">apple</div>
<div class="item">banana</div>
<div class="item">banana</div>
<div class="item">banana</div>
</div>
</div>
<div class="content">
<div class="item">apple</div>
<div class="item">apple</div>
<div class="item">apple</div>
<div class="item">apple</div>
<div class="item">banana</div>
<div class="item">banana</div>
<div class="item">banana</div>
</div>

Answer 3

To make the flex full width display please update your styles as follows;
.outside {
/* Note line3, the top and bottom will be the same, why add the flex on the different */
display: flex;
flex-direction: column;
}
.content {
background: skyblue;
display: flex;
}
.item {
width: 20%;
}
Also you need to read more about flex here. Hope this will work for you.

Answer 4

You just need to use flex-grow:1 on .content as:
.content {
background: skyblue;
display: flex;
flex-grow: 1;
flex-wrap: wrap;
}
This means the child will now take all the remaining space available. By default, the flex child just takes space as per its content.
You can check it here: https://codesandbox.io/s/dazzling-buck-mumtl3?file=/index.html