Why do nested flex items not respect the size of their parent container?

Question

css

Greetings.
There is a simple example: https://codepen.io/weranda/pen/QWNBLge

<div class="wrap">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.wrap{
  display: flex;
  flex-basis: 60%;
}

.item{
  flex-basis: 33.333%;

}

Logically, the parent container should occupy 60% of the width of the window, and nested in it - 33.3% of the width of the parent container, but this does not happen. Nested containers somehow increase the width of the parent container.
Why is this happening and how can it be fixed?

Answer 1

use width for .wrap, there is a feeling that flex-basis works on elements inside a flex container, and your wrap is not wrapped by any container with display: flex;

Answer 2

https://basicweb.ru/css/css_pr_flex-basis.php