Skip to content

Instantly share code, notes, and snippets.

@egid
Created April 25, 2013 23:23
Show Gist options
  • Save egid/5464041 to your computer and use it in GitHub Desktop.
Save egid/5464041 to your computer and use it in GitHub Desktop.
Using flexbox to set up a collapsible field that can grow with available space.
<style>
* {
padding: 0;
margin:0;
line-height: 1em;
font-size: 16px;
}
.parent {
max-width: 100%;
background: #eee;
/* display: table; */
/* display: -webkit-flex; */
/* -webkit-flex-flow: column; */
}
.flex-container > div {
/*       -webkit-flex: 1 1 auto; */
}
.addr {
text-overflow: ellipsis;
overflow: hidden;
min-width: 0px;
max-height: 1em;
background: #aabbcc;
/* max-width: auto; */
white-space: nowrap;
}
.unit {
/*
text-overflow: ellipsis;
overflow: hidden;
*/
white-space: nowrap;
background: #ccbbaa;
}
.flex-container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.flex-item:nth-child(1) {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
.flex-item:nth-child(2) {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
</style>
<div class="flex-container flex-container-style fixed-height">
<div class="flex-item addr">123 main long street name here blah&nbsp;</div>
<div class="flex-item unit">apartment #2</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment