Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
resize with flexbox - much easier than people seem to think!
<html>
<head>
<title>Resize Demo</title>
<style media="screen">
body {
margin:0;
padding:0;
}
.container {
display: flex;
height: 100%;
}
.infoBar {
/*flex: 1; prevents resize!*/
min-width:200px;
background-color: #cfc;
border-style: solid;
border-width: 1px;
resize: horizontal;
overflow: auto;
}
#canvas {
min-width:200px;
flex:3;
background-color: #cfe;
border-style: solid;
border-width: 1px;
}
</style>
</head>
<body>
<div class="container">
<div class="infoBar">
<ul>
<li>Thing1</li>
<li>Thing2</li>
<li>Thing3</li>
</ul>
</div>
<canvas id="canvas"></canvas>
</div>
</body>
</html>
@randompast

This comment has been minimized.

Copy link
Owner Author

@randompast randompast commented Mar 23, 2015

@Bluejanis

This comment has been minimized.

Copy link

@Bluejanis Bluejanis commented Sep 16, 2019

Nice.
Sadly IE11 does not support it, and I have to support IE11.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment