popup fixed почему криво

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: 'Roboto', sans-serif;
  color: white;
}

body {
  overflow: hidden;
}

.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 15px;
}

.popup {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: black;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
  left: 0;
  top: 0;
}

.popup__content div {
  height: 100vh;
}

<div class="popup">
  <div class="container">

    <div class="popup__content">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>

  </div>
</div>