How to prevent this lightbox from going off the top of the page?

Question

I can scroll down, but not up. I want a minimum 10px margin from the window border all around the dialog. It seems to work on the bottom, but not on the top for some reason. I can't figure out why.

jsbin

.greyOut {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: black;
  opacity: 0.5;
}
.wrap {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
}
.dialog {
  background-color: white;
  padding: 5px;
  border-radius: 3px;
  z-index: 100;
  margin: 10px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, .5);
}

<div class="wrap"><div class="greyOut"></div><div class="dialog" style="width: 500px;">
    
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum dolorem, reprehenderit earum dolores cumque autem numquam temporibus alias accusamus perspiciatis mollitia, itaque saepe consectetur adipisci quisquam deserunt quis ad aperiam.</p>
   <p>Vel temporibus vero neque, autem aspernatur quam laudantium corporis enim ex suscipit corrupti, quasi officiis quibusdam, sit repudiandae necessitatibus nostrum repellendus iure quisquam nulla voluptate fuga quod maiores! Illum, est!</p>
   <p>Aspernatur suscipit laborum reprehenderit earum, officiis, dolor neque temporibus mollitia corporis. Provident vel quis quod expedita deserunt culpa ex atque labore nihil voluptatum veniam minus, nemo nostrum fugiat facere quia.</p>
   <p>Praesentium quos vitae voluptas velit error recusandae delectus hic, facere nemo autem, perspiciatis cumque qui sed dolor officiis animi modi! Dolore hic, placeat itaque? Amet doloribus officia porro ipsam dignissimos.</p>
   <p>Laborum nam quaerat, amet, voluptates, cumque facilis quos accusamus dicta dolorum voluptatem quasi inventore minus qui quam sit incidunt. Debitis necessitatibus fuga, temporibus repudiandae nobis, est deleniti delectus doloremque magni?</p>
   <p>Consequatur, perspiciatis, praesentium reiciendis aspernatur laudantium veritatis nesciunt sed id cupiditate inventore velit nobis eligendi provident incidunt, impedit vitae iste odit? Non reprehenderit, ullam nihil modi repudiandae laudantium porro accusamus.</p>
   <p>Veritatis porro, perspiciatis mollitia maxime voluptatum consectetur cupiditate quam recusandae a consequatur officiis quas, dicta esse iusto minus ratione reiciendis impedit nam alias eveniet nobis. Ex dolorem eveniet voluptate necessitatibus!</p>
   <p>Eligendi dolorem voluptatem facere, cupiditate fugit praesentium consectetur velit explicabo, esse distinctio unde amet pariatur rerum, recusandae cum. Aperiam porro expedita commodi ipsam, rem vero officiis tempore. Obcaecati, eaque dolorum.</p>
   <p>Fugit reiciendis, nam illo libero autem quo rerum incidunt quis in deserunt, expedita doloremque! Qui rem hic quibusdam magnam debitis aliquam accusantium harum dolorem libero? Pariatur corporis similique voluptatum ipsam.</p>
   <p>Esse, dolorem ducimus nostrum id earum perspiciatis voluptatem culpa molestias voluptas excepturi odit maxime, expedita recusandae voluptatibus eaque doloremque vel nobis est assumenda illo quasi, debitis incidunt commodi. Labore, magni!</p>
   <p>Ut fugit praesentium quasi cumque libero distinctio exercitationem aperiam est quod inventore, ipsam hic aliquid perferendis voluptatibus, nemo aliquam, esse quia laboriosam cum? Maiores esse aut ullam accusantium, alias. Labore!</p>
   <p>Dicta consectetur quo, modi quisquam, esse natus ipsa nobis unde eligendi, iste accusamus doloribus quaerat facilis impedit accusantium recusandae quia quae autem aperiam debitis quas perspiciatis nihil. Autem, accusantium, ipsa.</p>
   <p>Voluptate, quas tempora adipisci repellat quisquam soluta, nisi sed consequatur nemo beatae hic fugit ex quaerat in itaque exercitationem, culpa libero assumenda distinctio, temporibus fuga officiis vero. Facere, fugit quibusdam.</p>
   <p>Vel ad, soluta autem quod voluptate, praesentium asperiores est nostrum accusamus qui fugiat earum facilis reiciendis ducimus iure perspiciatis quisquam! Fuga harum culpa, atque sed! Ut esse, eveniet. Similique, veritatis.</p>
   <p>Officiis nobis assumenda nemo quaerat ratione, maxime adipisci doloribus fugit odit sequi reiciendis sed quam, sunt eius odio. Nesciunt, quos repudiandae quo aperiam iure provident beatae ratione culpa deleniti consequatur.</p>
   <p>Quam, placeat accusantium sed dolore delectus aliquam provident ea. Culpa omnis nulla, perferendis nostrum nihil distinctio rerum. Eveniet iste, debitis voluptates, voluptas laudantium quas, esse, numquam eius soluta fugit sint.</p>
   <p>Molestiae officia optio reprehenderit sequi dolorum placeat, tempore natus expedita, ullam inventore non quod, eaque aut magnam officiis. Ad corrupti, rerum cumque ipsam maiores suscipit dolor numquam qui ratione quo.</p>
   <p>Saepe animi, voluptates natus nobis, illum iste nostrum. Assumenda sed praesentium neque nemo amet blanditiis fugiat architecto ad nobis voluptas esse repudiandae accusantium, officia quas aspernatur saepe similique dolor cupiditate.</p>
   <p>Accusantium, unde, molestiae! Eveniet voluptas, tempore voluptatem blanditiis, quam sint, unde fuga molestias delectus eum assumenda magni. Error, deleniti ex, vel eius nesciunt voluptatum aut laudantium aliquam pariatur rerum, consequuntur?</p>
   <p>Nemo ad quis alias possimus repellendus quo accusantium eos accusamus mollitia nulla consequuntur delectus perferendis expedita, aut ut cum sint a porro error cumque enim debitis. Ea cumque adipisci doloremque.</p>
    
    
    </div></div>

Answer 1

If need to apply margin: auto; to your .dialog class so that it will be aligned from the top instead of it being centered.

If you want to keep the 10px margin that you had originally set, just use padding on the parent instead.

CSS

.wrap {
  padding: 10px;
}

.dialog {
  margin: auto;
}

Working JSBin