内容在绝对定位的Flex容器上中断

Question

我正在尝试创建一个模态，该模态将在屏幕中间居中，但是如果内容不合适，它应该具有滚动条。我用的是flexbox。当内容适合屏幕时，它可以正常工作。当内容太长且不适合屏幕时，出现此问题。 这是一个示例http://jsfiddle.net/y0kpc82v/2/

HTML

<div class="dialog">
  <div class="modal">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo enim officiis fugiat aliquam quis, impedit, aspernatur nobis quibusdam eum eligendi. Obcaecati officia, ab quia illum, sequi quibusdam dolores voluptatem repellendus pariatur accusantium vel dolorum minima tenetur cumque dolore maxime expedita perspiciatis, eaque maiores illo cum commodi, alias culpa. Iste sunt quas eligendi ut qui quaerat sit aperiam nostrum adipisci, doloremque delectus tenetur voluptas tempore porro! Consequatur porro, ad accusantium reprehenderit ipsam quas veniam temporibus facere commodi. Officia dolorem atque, omnis aliquam molestiae, explicabo in dolore nobis, placeat, quisquam ipsam. Labore, ut totam, aliquam sequi reiciendis, corporis quia consequuntur minima fugit in iste earum, nihil aspernatur quisquam assumenda at. Atque rerum voluptatum nihil sapiente consequuntur esse, quaerat facilis optio inventore eum magni debitis modi ipsam recusandae, animi aspernatur, impedit perferendis adipisci distinctio placeat blanditiis excepturi. Nemo earum accusamus ut in sit, illum tenetur rem sunt impedit autem harum maxime perferendis enim non culpa, temporibus mollitia aliquam cum, quibusdam nisi placeat nobis! Consequuntur dolorem odit excepturi tempora reiciendis nam, voluptatum porro soluta corrupti. Velit ipsum perspiciatis accusantium hic consequuntur aliquid, deserunt minima vel ab magnam sunt maiores consectetur optio, pariatur sequi. Doloremque nulla harum nobis expedita quibusdam, esse. Eum porro vel ab debitis reiciendis accusamus similique eius nam, iste numquam. Aut corporis blanditiis repellat culpa. Blanditiis cumque iste consequuntur asperiores beatae, ut fugit odio! Tenetur ad dolores maxime, explicabo quisquam. Voluptates cumque, repellendus blanditiis sequi deleniti officiis doloribus inventore molestiae distinctio placeat hic quis. Voluptatem quod in, mollitia! At dolor maxime consectetur magni illo vitae eum molestiae, expedita culpa, iusto numquam. Cumque labore quidem quod libero enim autem similique culpa. Magni magnam deleniti recusandae impedit non est pariatur natus necessitatibus. Fuga obcaecati libero sed laudantium tempore fugit accusantium ut ratione nemo debitis nobis pariatur, cum voluptates quidem porro, temporibus deserunt ipsum doloremque. Modi ex, laborum ad similique ducimus veritatis temporibus tempora cumque deserunt debitis sequi, ut ullam natus suscipit magni saepe dolorem fugiat voluptatem delectus sunt non quam repellat molestias nemo obcaecati! Voluptatum obcaecati libero explicabo quod repellat possimus, eveniet vel sed ipsam tenetur incidunt a mollitia quam reiciendis eaque doloremque ratione numquam non accusamus! Blanditiis et amet ad. Alias odio veniam, eaque inventore nihil distinctio quos libero nulla dolores doloremque exercitationem eum facere sunt, delectus id? Eveniet neque quis voluptatibus officia, atque itaque rerum, culpa ipsum eligendi accusamus ad optio! Deleniti cum facilis, dolorem cupiditate ipsa doloremque ipsum quos ipsam soluta adipisci ea neque veritatis dolor nesciunt magni, aperiam deserunt repudiandae, eveniet earum. Vitae ipsum mollitia saepe in repudiandae facere natus veritatis maxime soluta cupiditate, quia nostrum placeat consequatur dolorem. Nesciunt natus ducimus consequatur temporibus dolorem blanditiis amet praesentium eos dolores id ab sit aperiam autem, in vero vitae exercitationem fuga enim neque, ratione odio inventore totam commodi alias officiis! Eveniet minima, maxime eius enim cum consequuntur officia nihil exercitationem dignissimos debitis repellat aspernatur earum vel atque sed dolorem expedita, esse sunt dolores. Id unde, totam ducimus recusandae repellat eaque facilis quaerat laudantium rerum rem culpa vero earum tenetur perspiciatis! Accusantium possimus explicabo totam voluptatibus, aspernatur in voluptatem necessitatibus consectetur sunt earum maxime?
  </div>
</div>

CSS

.dialog {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.modal {
  display: inline-block;
  max-width: 200px;
}