Skip to content
Snippets Groups Projects
Commit cfb6ad01 authored by Florian Atteneder's avatar Florian Atteneder
Browse files

add mwe for two column and scrollable layout

parent 7fc90bfe
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
public/mwe_twocolumn_scrollable.html 0 → 100644
+ 223
− 0
View file @ cfb6ad01
<!DOCTYPE html>
<html>
<body style="margin: 0; overflow: hidden">
<div style="display: flex; flex-direction: column; height: 100vh">
<div style="background-color: blue; color: white; display: flex">
header
</div>
<div style="display: flex; flex-direction: row; overflow: hidden">
<div style="display: flex; flex-grow: 1; flex-basis: 50%; flex-direction: column; overflow-y: auto">
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
<div>column1</div>
</div>
<div
style="
overflow-y: auto;
display: flex;
flex-basis: 50%;
flex-direction: column;
"
>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
</div>
</div>
</div>
</body>
</html>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment