Created
May 2, 2023 21:27
-
-
Save andrewluetgers/4df1d90ce55e503553d6ab6e6dc80e95 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div css={styles}> | |
| <div class="panel flex-container"> | |
| <div class="header">fixed</div> | |
| <div class="content flex-container non-scrollable"> | |
| <div class="flex-container non-scrollable"> | |
| expands.. | |
| <div class="list scrollable"> | |
| scrolls... | |
| </div> | |
| </div> | |
| </div> | |
| <div class="footer">fixed</div> | |
| </div> | |
| </div> | |
| let styles = css` | |
| /* IMPORTANT: what you need */ | |
| .flex-container { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .flex-container > :not(.scrollable):not(.non-scrollable) { | |
| flex-shrink: 0; | |
| } | |
| .flex-container > .scrollable, .non-scrollable { | |
| flex-grow: 1; | |
| } | |
| .non-scrollable { | |
| overflow: hidden; | |
| } | |
| .scrollable { | |
| overflow: auto; | |
| } | |
| /* NOT IMPORTANT: visual styles and hard-coded sizes */ | |
| .panel { | |
| width: 300px; | |
| height: auto; | |
| max-height: 100px; | |
| border: 1px solid blue; | |
| overflow: auto; | |
| } | |
| .header, .footer { | |
| height: 24px; | |
| background: orange; | |
| } | |
| .list { | |
| background: pink; | |
| } | |
| .content { | |
| background: blue; | |
| } | |
| ` |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment