Skip to content

Instantly share code, notes, and snippets.

@OllyHodgson

OllyHodgson/index.html

Created March 20, 2018 16:39
Show Gist options
  • Save OllyHodgson/a65f108f9cc5681422430175edd0ddc8 to your computer and use it in GitHub Desktop.
Save OllyHodgson/a65f108f9cc5681422430175edd0ddc8 to your computer and use it in GitHub Desktop.
Download ZIP
CSS flexbox layout experiment - boxes breaking out of boxes. It later occurred to me that CSS Grid might have been the better tool. Hey ho.
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<style>
html,
body {
margin: 0;
padding: 0;
}
* {
margin: 0;
box-sizing: border-box;
}
*+* {
margin-top: 1em;
}
/* Basic container styles */
.container {
box-shadow: 5px 5px 5px aqua;
background: silver;
padding: 1rem;
}
/* This will come in handy later */
@media (min-width: 800px) {
.container {
margin-bottom: 3rem;
}
}
/* Basic row styles */
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0 -1rem;
}
/* Our three heroic columns */
.col {
flex-basis: 100%;
max-width: 100%;
margin: 0;
padding-left: 1rem;
padding-right: 1rem;
}
/* Make them smaller on bigger screens */
@media (min-width: 800px) {
.col {
flex-basis: 33.33333%;
max-width: 33.33333%;
}
}
.inner {
background: white;
padding: 1rem;
min-height: 100%;
}
.col.overflow .inner {
background: red;
padding: 1rem;
}
@media (min-width: 800px) {
/* Stich the red box to the top of the container */
.col.overflow {
margin-top: -1rem;
}
/* Now for the magic. Give the red box a negative bottom margin and a height it sticks out the bottom of the others */
.col.overflow .inner {
box-shadow: 5px 5px 5px aqua;
height: calc(100% + 2rem);
margin-bottom: -2rem;
}
}
</style>
</head>
<body>
<div class="container silver">
<div class="row">
<div class="col">
<div class="inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id aliquam nisi. Curabitur quis enim ultrices,
rhoncus tellus vitae, congue dolor. Suspendisse nec varius turpis. Suspendisse ultricies venenatis
ante, quis facilisis lectus sollicitudin id. Pellentesque scelerisque nisl lectus, nec dignissim
mauris imperdiet sodales. Nunc consectetur eget enim a fermentum. Nullam bibendum tortor quis sapien
tempor vehicula. Sed vestibulum sem non nulla molestie, sed sollicitudin ligula condimentum. Nullam
tristique vehicula justo ut condimentum. In sit amet vestibulum velit. Proin rhoncus feugiat diam,
vel mattis leo feugiat eu. Nam egestas vulputate eros, sit amet condimentum arcu blandit eu. Sed
sagittis leo id faucibus lobortis. Suspendisse vel ante id ligula tincidunt volutpat a nec nibh.</p>
</div>
</div>
<div class="col overflow">
<div class="inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis nulla nec dui condimentum ultricies.
Suspendisse tincidunt ut purus ut accumsan. Aliquam vulputate malesuada tristique. Morbi id nibh
magna. Aenean iaculis, nulla id scelerisque pulvinar, arcu orci accumsan sem, eu varius nisl nunc
in sem. Nam pretium nibh lacus, et tempor enim pulvinar quis. Mauris viverra lorem ac malesuada ullamcorper.</p>
<p>Curabitur risus magna, egestas ac risus nec, malesuada rhoncus enim. Curabitur eu volutpat ex, varius
ornare libero. Nunc in ultricies nibh, sit amet interdum felis. Maecenas eget leo ac lacus ultrices
vestibulum. Nullam euismod tempor feugiat. Quisque porttitor enim consectetur magna maximus pharetra.
Sed vitae metus posuere, tincidunt orci vel, pellentesque urna. Proin vehicula euismod turpis, a
euismod magna porttitor et. Cras in urna ultricies odio gravida ornare. Nam imperdiet, ex et condimentum
hendrerit, orci augue auctor nulla, quis luctus tortor sem nec sapien. Aliquam velit ligula, iaculis
at ligula sit amet, imperdiet placerat diam. Quisque placerat eget orci eu eleifend. In tincidunt
mattis eros sed varius. Ut fermentum vehicula tortor, nec ornare eros pharetra id. Nunc molestie
mauris faucibus, elementum lacus at, sagittis est. Praesent vestibulum, augue at venenatis rhoncus,
felis sapien rhoncus nisi, a volutpat felis neque id libero.</p>
</div>
</div>
<div class="col">
<div class="inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id aliquam nisi. Curabitur quis enim ultrices,
rhoncus tellus vitae, congue dolor. Suspendisse nec varius turpis. Suspendisse ultricies venenatis
ante, quis facilisis lectus sollicitudin id. Pellentesque scelerisque nisl lectus, nec dignissim
mauris imperdiet sodales. Nunc consectetur eget enim a fermentum. Nullam bibendum tortor quis sapien
tempor vehicula. Sed vestibulum sem non nulla molestie, sed sollicitudin ligula condimentum. Nullam
tristique vehicula justo ut condimentum. In sit amet vestibulum velit. Proin rhoncus feugiat diam,
vel mattis leo feugiat eu. Nam egestas vulputate eros, sit amet condimentum arcu blandit eu. Sed
sagittis leo id faucibus lobortis. Suspendisse vel ante id ligula tincidunt volutpat a nec nibh.</p>
</div>
</div>
</div>
</div>
<div class="container silver">
<div class="row">
<div class="col">
<div class="inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id aliquam nisi. Curabitur quis enim ultrices,
rhoncus tellus vitae, congue dolor. Suspendisse nec varius turpis. Suspendisse ultricies venenatis
ante, quis facilisis lectus sollicitudin id. Pellentesque scelerisque nisl lectus, nec dignissim
mauris imperdiet sodales. Nunc consectetur eget enim a fermentum. Nullam bibendum tortor quis sapien
tempor vehicula. Sed vestibulum sem non nulla molestie, sed sollicitudin ligula condimentum. Nullam
tristique vehicula justo ut condimentum. In sit amet vestibulum velit. Proin rhoncus feugiat diam,
vel mattis leo feugiat eu. Nam egestas vulputate eros, sit amet condimentum arcu blandit eu. Sed
sagittis leo id faucibus lobortis. Suspendisse vel ante id ligula tincidunt volutpat a nec nibh.</p>
<p>Curabitur risus magna, egestas ac risus nec, malesuada rhoncus enim. Curabitur eu volutpat ex, varius
ornare libero. Nunc in ultricies nibh, sit amet interdum felis. Maecenas eget leo ac lacus ultrices
vestibulum. Nullam euismod tempor feugiat. Quisque porttitor enim consectetur magna maximus pharetra.
Sed vitae metus posuere, tincidunt orci vel, pellentesque urna. Proin vehicula euismod turpis, a
euismod magna porttitor et. Cras in urna ultricies odio gravida ornare. Nam imperdiet, ex et condimentum
hendrerit, orci augue auctor nulla, quis luctus tortor sem nec sapien. Aliquam velit ligula, iaculis
at ligula sit amet, imperdiet placerat diam. Quisque placerat eget orci eu eleifend. In tincidunt
mattis eros sed varius. Ut fermentum vehicula tortor, nec ornare eros pharetra id. Nunc molestie
mauris faucibus, elementum lacus at, sagittis est. Praesent vestibulum, augue at venenatis rhoncus,
felis sapien rhoncus nisi, a volutpat felis neque id libero.</p>
</div>
</div>
<div class="col overflow">
<div class="inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis nulla nec dui condimentum ultricies.
Suspendisse tincidunt ut purus ut accumsan. Aliquam vulputate malesuada tristique. Morbi id nibh
magna. Aenean iaculis, nulla id scelerisque pulvinar, arcu orci accumsan sem, eu varius nisl nunc
in sem. Nam pretium nibh lacus, et tempor enim pulvinar quis. Mauris viverra lorem ac malesuada ullamcorper.</p>
</div>
</div>
<div class="col">
<div class="inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id aliquam nisi. Curabitur quis enim ultrices,
rhoncus tellus vitae, congue dolor. Suspendisse nec varius turpis. Suspendisse ultricies venenatis
ante, quis facilisis lectus sollicitudin id. Pellentesque scelerisque nisl lectus, nec dignissim
mauris imperdiet sodales. Nunc consectetur eget enim a fermentum. Nullam bibendum tortor quis sapien
tempor vehicula. Sed vestibulum sem non nulla molestie, sed sollicitudin ligula condimentum. Nullam
tristique vehicula justo ut condimentum. In sit amet vestibulum velit. Proin rhoncus feugiat diam,
vel mattis leo feugiat eu. Nam egestas vulputate eros, sit amet condimentum arcu blandit eu. Sed
sagittis leo id faucibus lobortis. Suspendisse vel ante id ligula tincidunt volutpat a nec nibh.</p>
</div>
</div>
</div>
</div>
<div class="container silver">
<div class="row">
<div class="col">
<div class="inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id aliquam nisi. Curabitur quis enim ultrices,
rhoncus tellus vitae, congue dolor. Suspendisse nec varius turpis. Suspendisse ultricies venenatis
ante, quis facilisis lectus sollicitudin id. Pellentesque scelerisque nisl lectus, nec dignissim
mauris imperdiet sodales. Nunc consectetur eget enim a fermentum. Nullam bibendum tortor quis sapien
tempor vehicula. Sed vestibulum sem non nulla molestie, sed sollicitudin ligula condimentum. Nullam
tristique vehicula justo ut condimentum. In sit amet vestibulum velit. Proin rhoncus feugiat diam,
vel mattis leo feugiat eu. Nam egestas vulputate eros, sit amet condimentum arcu blandit eu. Sed
sagittis leo id faucibus lobortis. Suspendisse vel ante id ligula tincidunt volutpat a nec nibh.</p>
</div>
</div>
<div class="col overflow">
<div class="inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis nulla nec dui condimentum ultricies.
Suspendisse tincidunt ut purus ut accumsan. Aliquam vulputate malesuada tristique. Morbi id nibh
magna. Aenean iaculis, nulla id scelerisque pulvinar, arcu orci accumsan sem, eu varius nisl nunc
in sem. Nam pretium nibh lacus, et tempor enim pulvinar quis. Mauris viverra lorem ac malesuada ullamcorper.</p>
</div>
</div>
<div class="col">
<div class="inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id aliquam nisi. Curabitur quis enim ultrices,
rhoncus tellus vitae, congue dolor. Suspendisse nec varius turpis. Suspendisse ultricies venenatis
ante, quis facilisis lectus sollicitudin id. Pellentesque scelerisque nisl lectus, nec dignissim
mauris imperdiet sodales. Nunc consectetur eget enim a fermentum. Nullam bibendum tortor quis sapien
tempor vehicula. Sed vestibulum sem non nulla molestie, sed sollicitudin ligula condimentum. Nullam
tristique vehicula justo ut condimentum. In sit amet vestibulum velit. Proin rhoncus feugiat diam,
vel mattis leo feugiat eu. Nam egestas vulputate eros, sit amet condimentum arcu blandit eu. Sed
sagittis leo id faucibus lobortis. Suspendisse vel ante id ligula tincidunt volutpat a nec nibh.</p>
<p>Curabitur risus magna, egestas ac risus nec, malesuada rhoncus enim. Curabitur eu volutpat ex, varius
ornare libero. Nunc in ultricies nibh, sit amet interdum felis. Maecenas eget leo ac lacus ultrices
vestibulum. Nullam euismod tempor feugiat. Quisque porttitor enim consectetur magna maximus pharetra.
Sed vitae metus posuere, tincidunt orci vel, pellentesque urna. Proin vehicula euismod turpis, a
euismod magna porttitor et. Cras in urna ultricies odio gravida ornare. Nam imperdiet, ex et condimentum
hendrerit, orci augue auctor nulla, quis luctus tortor sem nec sapien. Aliquam velit ligula, iaculis
at ligula sit amet, imperdiet placerat diam. Quisque placerat eget orci eu eleifend. In tincidunt
mattis eros sed varius. Ut fermentum vehicula tortor, nec ornare eros pharetra id. Nunc molestie
mauris faucibus, elementum lacus at, sagittis est. Praesent vestibulum, augue at venenatis rhoncus,
felis sapien rhoncus nisi, a volutpat felis neque id libero.</p>
</div>
</div>
</div>
</div>
<div class="container silver">
<div class="row">
<div class="col">
<div class="inner">
<p>Lorem</p>
</div>
</div>
<div class="col overflow">
<div class="inner">
<p>ipsum</p>
</div>
</div>
<div class="col">
<div class="inner">
<p>dolor</p>
</div>
</div>
</div>
</div>
<div class="container silver">
<div class="row">
<div class="col">
<div class="inner">
<p>Lorem</p>
</div>
</div>
<div class="col overflow">
<div class="inner">
<p>ipsum</p>
</div>
</div>
<div class="col">
<div class="inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id aliquam nisi. Curabitur quis enim ultrices,
rhoncus tellus vitae, congue dolor. Suspendisse nec varius turpis. Suspendisse ultricies venenatis
ante, quis facilisis lectus sollicitudin id. Pellentesque scelerisque nisl lectus, nec dignissim
mauris imperdiet sodales. Nunc consectetur eget enim a fermentum. Nullam bibendum tortor quis sapien
tempor vehicula. Sed vestibulum sem non nulla molestie, sed sollicitudin ligula condimentum. Nullam
tristique vehicula justo ut condimentum. In sit amet vestibulum velit. Proin rhoncus feugiat diam,
vel mattis leo feugiat eu. Nam egestas vulputate eros, sit amet condimentum arcu blandit eu. Sed
sagittis leo id faucibus lobortis. Suspendisse vel ante id ligula tincidunt volutpat a nec nibh.</p>
<p>Curabitur risus magna, egestas ac risus nec, malesuada rhoncus enim. Curabitur eu volutpat ex, varius
ornare libero. Nunc in ultricies nibh, sit amet interdum felis. Maecenas eget leo ac lacus ultrices
vestibulum. Nullam euismod tempor feugiat. Quisque porttitor enim consectetur magna maximus pharetra.
Sed vitae metus posuere, tincidunt orci vel, pellentesque urna. Proin vehicula euismod turpis, a
euismod magna porttitor et. Cras in urna ultricies odio gravida ornare. Nam imperdiet, ex et condimentum
hendrerit, orci augue auctor nulla, quis luctus tortor sem nec sapien. Aliquam velit ligula, iaculis
at ligula sit amet, imperdiet placerat diam. Quisque placerat eget orci eu eleifend. In tincidunt
mattis eros sed varius. Ut fermentum vehicula tortor, nec ornare eros pharetra id. Nunc molestie
mauris faucibus, elementum lacus at, sagittis est. Praesent vestibulum, augue at venenatis rhoncus,
felis sapien rhoncus nisi, a volutpat felis neque id libero.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment