andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Autoscoping (#103)

Browse Source 
* Add autoscoping with generated demo

* Remove manual demo from all snippets

* Add JavaScript inside IIFE

* Align mouse-cursor-gradient-tracking.md to demo code

* Match snippets to demo

* Update CONTRIBUTING.md

* Create reusable function for code extraction
This commit is contained in:
atomiks
2018-10-05 09:18:51 +10:00
committed by GitHub
parent 2afb2fe88a
commit 11eff23e47
41 changed files with 107 additions and 1102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
snippets/last-item-with-remaining-available-height.md
View File

@ -28,35 +28,13 @@ body {
}
.container > div:last-child {
background-color: #333;
background-color: tomato;
flex: 1;
}
```
#### Demo
<div class="snippet-demo">
<div class="snippet-demo__last-time-with-all-available-height">
<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
</div>
</div>
<style>
.snippet-demo__last-time-with-all-available-height {
height: 300px;
display: flex;
flex-direction: column;
}
.snippet-demo__last-time-with-all-available-height > div:last-child {
background-color: #333;
flex-grow: 1;
color: white;
}
</style>
#### Explanation
1. `height: 100%` set the height of container as viewport height.