I am struggling with CSS with what is probably a pretty simple problem: I have a hierarchy of , all using flex / flex-column, that are displayed in a fixed size container (an iframe).

Deep in the hierarchy there is a “description” div that contains a potentially long textual description; I gave it a min height of 4em.
Assuming we start from an iframe high enough to accomodate everything without scrolling, as the frame’s height is reduced I’d like to

• first reduce the description (and make it scrollable( down to 4em,
• then once that’s not enough make the top-level container scrollable

This codepen CSS fiddle demonstrates the issue:
CSS fiddle

The main issue is that if I set overflow-y: auto on the parent then it becomes scrollable without trying to constrain the description down to its min height first.

How can I achieve this?

Thanks!

HTML (Pug):

div(class="main") 
   div(class="parent")
      div(class="form")
         h4 Title
         div(class="description") Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

         button(class="button") Click me

CSS:

.main {
   width: 24em;
   height: 16em;
   overflow-y: hidden;
   background-color: lightgreen;
}

.parent {
   height: 100%;
   overflow-y: auto;
}

h4 {
   margin-bottom: 0;
}

.form {
   display: flex;
   flex-direction: column;
   row-gap: 1em;
   overflow-y: auto;
}

.description {
   flex: 1 1;
   // height: 0;
   min-height: 4em;
   overflow-y: auto;
}

.button {
}