Last active
October 31, 2019 17:06
-
-
Save SteveALee/4bd828882f2027f8878eb9ef856f7f60 to your computer and use it in GitHub Desktop.
Responsive SVG in Flexbox
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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <style> | |
| body { | |
| margin: 1px; | |
| } | |
| #main { | |
| display: flex; | |
| flex-direction: column; | |
| width: 100%; | |
| height: 100vh; | |
| } | |
| #header { | |
| flex-grow: 0; | |
| } | |
| #content { | |
| display: flex; | |
| flex-direction: row; | |
| } | |
| #left-pane { | |
| flex-grow: 0; | |
| } | |
| #right-pane { | |
| flex-grow: 1; | |
| } | |
| #svg { | |
| } | |
| /* highlight borders for debugging only */ | |
| #main { | |
| border: solid green; | |
| } | |
| #main > * { | |
| border: solid blue; | |
| } | |
| #content { | |
| border: solid green; | |
| } | |
| #content > * { | |
| border: solid red; | |
| } | |
| </style> | |
| <body> | |
| <div id="main"> | |
| <div id="header"><h1>Header</h1></div> | |
| <div id="content"> | |
| <div id="left-pane"> | |
| <h2> | |
| Some content here on the left | |
| </h2> | |
| </div> | |
| <div id="right-pane"> | |
| <svg id="svg" viewBox="-100 -100 200 200"> | |
| <circle | |
| r="100" | |
| stroke="deepskyblue" | |
| fill="lightskyblue" | |
| /> | |
| </svg> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment