pls refer the below code

<div >
  <div >
    <div >apple</div>
    <div >apple</div>
    <div >apple</div>
    <div >apple</div>
    <div >banana</div>
    <div >banana</div>
    <div >banana</div>
  </div>
</div>

========

<div >
  <div >apple</div>
  <div >apple</div>
  <div >apple</div>
  <div >apple</div>
  <div >banana</div>
  <div >banana</div>
  <div >banana</div>
</div>

.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%;
}

the screenshot is how the two cases work enter image description here

Questions:

1. I don't know why the with of element with class outside do not fill the screen(like the element with class content)
2. I would like to know on what basis the 20% of item is calculated

CodePudding user response：

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.

2. In your current example, the 20% width is determined from the width of the element with class 'content'.

CodePudding user response：

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 >
  <div >
    <div >apple</div>
    <div >apple</div>
    <div >apple</div>
    <div >apple</div>
    <div >banana</div>
    <div >banana</div>
    <div >banana</div>
  </div>
</div>
<div >
  <div >apple</div>
  <div >apple</div>
  <div >apple</div>
  <div >apple</div>
  <div >banana</div>
  <div >banana</div>
  <div >banana</div>
</div>

CodePudding user response：

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.

CodePudding user response：

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