Make Child only as large as Parent without constraining Parent in CSS

Question

I have a page layout like seen below. The whole page is wrapped in a div with these properties:

grid-template-columns: 4rem 1fr
grid-template-rows: 4rem 1fr
height: 100vh

However, none of the panels shown below are constrained. Panel A has a property of overflow-y: scroll and display: flex and flex-direction: column but as none of the components are constrained the scrollbar has no effect.

How could I achieve what is seen below without constraining any of the panels? I want Panel A to be only as large as it would be without its content, the rest should be scrollable

This was already asked here https://stackoverflow.com/q/44052336/383904 and here https://stackoverflow.com/q/65091323/383904 and... — Roko C. Buljan, Dec 01 '20 at 17:15
@RokoC.Buljan I think this only applies to grids. I will have to change my question a bit i think. The content in A will be a list of unknown length. So i think i should place it in a flexbox — Tobi, Dec 01 '20 at 17:20
Post your HTML and CSS. What you've given us is not enough to help you. Please read [how to create a minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). — disinfor, Dec 01 '20 at 17:29

Roko C. Buljan · Accepted Answer · 2020-12-01T19:42:09.167

Using CSS flex:
Here's an example how to create GUI interfaces where the document has no scrollbar, but rather - every separate unit is scrollable (<article> panels in the below example).

* {
  margin: 0;
  box-sizing: border-box;
  outline: 2px solid red; outline-offset: -2px;
}

html, body {
  height: 100vh;
}

body,
main,
section {
  display: flex;
  flex: 1;
  overflow: hidden;  /* Overflow hidden on a flex parent will help... */
}

main {
  flex-flow: column;
}

article {
  overflow: auto; /* ...to achieve scrollbars on its child element */
  width: 100%;
}

<aside>ASIDE</aside>
<main>
  <header>HEADER</header>
  <section>
    <article><p style="height: 200vh;">PANEL 1 (tall)</p></article>
    <article>PANEL 2</article>
  </section>
</main>

Make Child only as large as Parent without constraining Parent in CSS

1 Answers1