The width size of the flex item does not exceed

The flex item has the flex-shrink property and the default value is 1. The flex-shrink property is a factor that indicates how much the flex item shrinks to other flex items.

7 7.1.The flex Shorthand ^[1]

<'flex-shrink'>
This <number[0, ]]>component sets flex-shrink longhand and specifications the flex shrink factor, which determines how much the flex item will shrink relative to the rest of the flex items in the flexible containment is present.

This reduces the size of the flex item to the container size, so the flex item does not stick out.Therefore, setting the value of the flex-shirink property to 0 solves this problem.

.container{
  width —50vw;
  margin:0 auto;
  display:flex;
  justify-content:center;
  align-items:center;
  border —1px solid black;
}

.item{
  border —1px solid red;
  width: 150%;
  height —100%;
  overflow —auto;
  flex-shrink:0; /* Add */
}

<div class="container">
  <div class="item">
    <p> ahhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh.
  </div>
</div>