Почему flex-wrap не делает обтекание сбоку?

.container{
  width: 90%;
  margin: 0 auto;
}
.wrapper{
  width: 100%;
  display:flex;
  flex-wrap: wrap;
  margin-top: 20px;
  margin-left: -3%;
  margin-right: -3%;
}
.item{
  width: 33%;
  padding-left: 3%;
  padding-right: 3%;
}
.item span{
  display: inline-block;
  border: 1px solid black;
  margin-bottom: 20px;
  width: 100%;
}

<div class="container">
    <div class="wrapper">
        <div class="item"><span>1</span></div>
        <div class="item"><span>2</span></div>
        <div class="item"><span>3</span></div>
        <div class="item"><button>click</button></div>
        <div class="item1">
            <p>Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаешься с 
                <a target="blank" href="#">политикой конфиденциальности</a>
            </p>
        </div>
    </div>
</div>