Skip to content

Instantly share code, notes, and snippets.

@filipesperandio
Forked from anonymous/index.html
Last active September 17, 2016 20:37
Show Gist options
  • Save filipesperandio/9fa14813430f0f440ea3 to your computer and use it in GitHub Desktop.
Save filipesperandio/9fa14813430f0f440ea3 to your computer and use it in GitHub Desktop.
Flex Box Spike | http://jsbin.com/beluce
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
ol, li {
margin: 0;
padding: 0;
}
.item {
overflow: hidden;
display: flex;
align-items: center;
background-color: green;
}
.item * {
flex-grow: 1;
}
.item .horizontal {
display: flex;
overflow: hidden;
background-color: yellow;
}
.item .horizontal > :first-child {
background-color: red;
width: 180px;
max-width: 180px;
}
.item .horizontal > :last-child {
background-color: blue;
flex-grow: 1;
}
.ellipsis {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.item.has-left > :first-child {
flex-grow: 0;
}
.item.has-right > :last-child {
flex-grow: 0;
}
</style>
</head>
<body>
<ol>
<li class="item borderless has-left has-right">
<i class="icon material-icons positive">location_on</i>
<div class="horizontal">
<h2 class="primary-text">location</h2>
<h2 class="secondary-text ellipsis"> operator</h2>
</div>
<i class="icon material-icons icon-right">chevron_right</i>
</li>
</ol>
<script id="jsbin-source-css" type="text/css">
ol, li {
margin: 0;
padding: 0;
}
.item {
overflow: hidden;
display:flex;
align-items: center;
background-color: green;
}
.item * {
flex-grow: 1;
}
.item .horizontal {
display: flex;
overflow: hidden;
background-color: yellow;
> :first-child {
background-color: red;
width: 180px;
max-width: 180px;
}
> :last-child {
background-color: blue;
flex-grow: 1;
}
}
.ellipsis {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.item.has-left > :first-child {
flex-grow: 0;
}
.item.has-right > :last-child {
flex-grow: 0;
}
</script>
</body>
</html>
ol, li {
margin: 0;
padding: 0;
}
.item {
overflow: hidden;
display: flex;
align-items: center;
background-color: green;
}
.item * {
flex-grow: 1;
}
.item .horizontal {
display: flex;
overflow: hidden;
background-color: yellow;
}
.item .horizontal > :first-child {
background-color: red;
width: 180px;
max-width: 180px;
}
.item .horizontal > :last-child {
background-color: blue;
flex-grow: 1;
}
.ellipsis {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.item.has-left > :first-child {
flex-grow: 0;
}
.item.has-right > :last-child {
flex-grow: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment