I discovered some flex and grid behavior today that I don't understand (the behavior is the same for both flexbox and grid).
The tall child extends out the top of the parent element so that the top of the child is not reachable via scroll. I would have expected the child to become aligned to the top of the parent element, and to be able to scroll the parent to see the rest of the child.
What's the scoop here? Is there a way to center a child but have its parent scroll if the child is too tall?
.flex-container { width: 300px; height: 200px; overflow: auto; display: flex; align-items: center; justify-content: center; border: 1px solid red;}<div class="flex-container"><div class="tall-child"><strong>I'm at the beginning,</strong> consectetur adipisicing elit. Ea iusto adipisci, at hic mollitia est, nobis aut, doloremque cupiditate aperiam esse laboriosam optio? Neque aut excepturi earum quisquam repellat laborum nesciunt et quis sapiente quo vitae odit velit laboriosam fugiat, alias non cumque obcaecati amet voluptates in atque dolore quam at. Unde iste voluptate molestiae voluptatibus temporibus nobis porro suscipit numquam magnam atque maxime repudiandae alias sunt, eos iusto laboriosam. Debitis quae voluptatem reprehenderit, tempore molestiae? Doloribus quod voluptate, dolorem! Nostrum deserunt omnis reprehenderit molestias ab cum, eveniet est vel consequatur inventore adipisci mollitia iure, fugit ratione! Impedit suscipit voluptate tempore numquam aut. Non eum, hic in! Assumenda magnam facere quas odio modi repellendus inventore voluptatum quae ipsam laudantium. Accusamus provident ut similique quidem. Sequi totam eum impedit nobis voluptatibus a voluptate at perspiciatis, dolorum. Perspiciatis quas, voluptatem quis omnis sint quos magnam ipsum sit corporis inventore numquam illum ut id deserunt. Reprehenderit ut aliquid, expedita quo error! Quasi consectetur, impedit! Eius exercitationem fugiat voluptate excepturi ex, maiores delectus itaque ipsum ipsa modi veritatis deleniti possimus enim necessitatibus corporis, dolor officia. Nostrum impedit laboriosam dicta, enim obcaecati vitae molestiae. Quisquam, maiores est perferendis. Sapiente, accusantium, quam! Soluta quas quod voluptatibus sed omnis nemo, facere, cum eveniet, at quis minus. Expedita veniam dicta optio unde vitae tenetur ipsum. Iure delectus, tempora, rem, amet eligendi temporibus possimus corporis consequuntur quas odit ea, animi harum distinctio. Animi ea numquam provident ut quam corrupti. Officiis quod id veniam consectetur nihil porro accusamus totam possimus fugiat voluptates exercitationem labore modi vitae adipisci reprehenderit minima, distinctio ducimus atque. Vero ratione, doloremque blanditiis quo laboriosam officiis, iure. Provident praesentium, architecto aut nisi labore perspiciatis, repudiandae quam reprehenderit esse nihil blanditiis eum id hic eaque. Minima quia autem eius quaerat, repellendus dicta aliquid ad accusamus! Aliquam aut odio fugiat eaque sunt sapiente aperiam sint consequuntur consectetur neque, iure sed quis ut exercitationem? Rerum adipisci magni eaque officia molestias aliquid, eum commodi itaque, iure sunt hic. Aspernatur similique ducimus, sed laborum nemo sunt, quae incidunt adipisci voluptas, doloribus aliquam ipsa. Ab laborum minus, id optio at expedita, mollitia sed reiciendis illo debitis eveniet sapiente perspiciatis tempora quae fugit culpa modi cum assumenda cupiditate non nostrum. Totam suscipit dolor facilis eligendi, laboriosam, soluta. Iste laudantium itaque eveniet accusantium accusamus autem impedit nulla in voluptatum temporibus, asperiores sapiente facere aperiam, repellendus dolor magnam, inventore beatae rerum quisquam reiciendis ad ut laboriosam consectetur. Dolorum eos nam voluptatum possimus blanditiis molestiae eaque error quos tenetur dicta earum eius adipisci doloremque, aliquam animi cupiditate at reprehenderit explicabo! Tempora culpa nostrum iusto corporis, unde at, ab vero ratione in, nesciunt, est repudiandae tenetur suscipit quam soluta. Tempore, odit, sapiente. Et praesentium assumenda eveniet aspernatur atque veniam commodi modi minus aliquam cupiditate labore magnam, eos quas nam ipsam in alias fugiat rem, ex libero facilis natus. Maxime possimus commodi aliquid culpa, nam rerum totam porro tempora voluptatem esse in eius molestiae maiores illum eaque et natus vel! Iusto, repudiandae. Dignissimos, praesentium enim blanditiis optio, consectetur autem. Vel quod, qui possimus provident vitae ea similique ex nulla asperiores sit? Nulla vero nemo saepe odit quod facilis magni placeat? Dolores ab adipisci ullam quibusdam ex facere optio illo dignissimos eum. Praesentium, excepturi in quibusdam cumque mollitia nisi illum minus delectus quidem minima nesciunt asperiores doloribus dolorum, quasi architecto voluptates. Ipsa, obcaecati, nam? Dolor sapiente nisi nihil, dolorum, culpa ullam eveniet minus officiis tempora esse incidunt unde. Quaerat nulla laudantium vero perspiciatis optio? Accusantium, aliquid! Aliquam doloremque ratione placeat dicta atque neque quaerat autem necessitatibus distinctio doloribus repudiandae, beatae velit pariatur ipsa! Nobis sed hic assumenda cum non reiciendis!</div></div>