Skip to content

Instantly share code, notes, and snippets.

Created September 15, 2015 09:17
Show Gist options
  • Save anonymous/38b08e0b5162caae0a27 to your computer and use it in GitHub Desktop.
Save anonymous/38b08e0b5162caae0a27 to your computer and use it in GitHub Desktop.
Untitled
.base {
-webkit-columns: 2;
-moz-columns: 2;
background: red;
width: 600px;
height: 200px;
}
.block {
max-height: 100%;
max-width: 100%;
-webkit-column-break-inside: avoid;
column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid; /* IE 10+ */
background: blue;
overflow: hidden;
display: flex;
flex-direction: column;
}
.a {
background: yellow;
flex-grow: 1;
overflow: hidden;
}
.b {
flex-grow: 0;
width: 90px;
background: green;
}
img {
max-width: 100%;
max-height: 100%;
display: block;
margin: 0 auto;
}
<div class="base">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem <div class="block"><div class="a"><img src="http://www2.stihi.ru/photos/zabiakati.jpg"/></div><div class="b">cat<br/>cat</div></div> ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </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