Skip to content

Instantly share code, notes, and snippets.

@jordangray
Created November 21, 2013 16:58
Show Gist options
  • Save jordangray/7585471 to your computer and use it in GitHub Desktop.
Save jordangray/7585471 to your computer and use it in GitHub Desktop.
SO #20126262: make last inline child fill available space.
/*
* SO #20126262: make last inline child fill available space.
*/
div {
display: flex;
flex-wrap: wrap;
}
span:last-child {
flex: auto;
}
/* Decorative styles ------------------------- */
span {
background: lightgrey;
font: bold 15px/20px Segoe UI, Arial, Helvetica, sans-serif;
height: 20px;
padding: 10px 20px;
margin: 5px;
}
span:last-child {
background: none;
border: 3px dashed lightgrey;
padding: 7px 17px;
text-align: center;
}
<div>
<span>First lorem ipsum</span>
<span>Second</span>
<span>Third dolar sit</span>
<span>Fourth amet</span>
<span>Last child</span>
</div>
// alert('Hello world!');
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment