I'm using CSS Grid to lay out a fixed-height container with 8 rows. Each row is defined using:
grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));The container has a fixed height of 600px, and there are 8 .box items inside it. One of these items (the third one) contains a very large block of text, which clearly overflows its grid cell.
.container { height: 600px; width: 500px; display: grid; grid-auto-flow: row; grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));}.box { color: white; font-size: 1.5rem; text-align: center;}body { background-color: bisque;}<body><div class="container"><div class="box" style="background-color: #e53935">FIRST</div><div class="box" style="background-color: #d81b60">SECOND</div><div class="box" style="background-color: #8e24aa"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minus sed tempore saepe in voluptatem asperiores velit animi iure mollitia itaque atque distinctio blanditiis accusamus officiis, dolor iusto quis. Nemo, optio! Nemo quos provident, odit hic maiores obcaecati ut debitis placeat, sapiente tenetur perspiciatis praesentium in! Vero quos inventore illum perferendis odio quo eligendi consequatur beatae, libero repellat eaque esse. Error. Vero deleniti repellendus enim itaque sapiente dolor, esse eos dolorum nisi laudantium incidunt eligendi asperiores delectus laboriosam obcaecati ut. Atque natus non alias quae nesciunt magnam veniam ad culpa necessitatibus. Ea tenetur assumenda aspernatur rem consectetur quo pariatur amet quibusdam? Perferendis nobis ea odio laborum atque vel consectetur. Illo odit inventore quis eum quaerat! Optio totam velit autem nulla et. Possimus facilis quos voluptates hic. Accusamus reprehenderit nihil aliquid? Nisi ducimus minima eveniet quos rerum dicta, illo obcaecati excepturi nesciunt, voluptatibus non modi facere saepe minus necessitatibus, cum autem blanditiis?</div><div class="box" style="background-color: #5e35b1">FOURTH</div><div class="box" style="background-color: #3949ab">FIFTH</div><div class="box" style="background-color: #1e88e5">SIXTH</div><div class="box" style="background-color: #00acc1">SEVENTH</div><div class="box" style="background-color: #00897b">EIGHTH</div></div></body>Question:
I expected the third row to expand vertically to fit its overflowing content. But instead, it stays fixed at 100px and overflows visually.
I am trying to understand the underlying concept here why THIRD ROW NOT EXPANDING to fit the content?