Skip to content

Instantly share code, notes, and snippets.

@wangsy

wangsy/flexbox.html

Created September 1, 2016 06:02
Show Gist options
  • Save wangsy/d87a523f5a45fd57f0b298e9455b8de3 to your computer and use it in GitHub Desktop.
Save wangsy/d87a523f5a45fd57f0b298e9455b8de3 to your computer and use it in GitHub Desktop.
Download ZIP
CSS for slack-like chatting app
Raw
flexbox.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flex Box</title>
<style media="screen">
html, body {
height: 100%;
}
.main-container {
display: flex;
flex-direction: row;
height: 100%;
}
.action-pane {
border: 2px solid #ffc107;
margin: 10px;
}
.left-pane {
min-width: 120px;
max-width: 120px;
flex: 0 1 auto;
}
.right-pane {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
.chat-body-area {
flex: 1 1 auto;
}
.chat-input-area {
flex: 0 1 auto;
height: 26px;
}
</style>
</head>
<body>
<div class="main-container">
<div class="action-pane left-pane">left-pane</div>
<div class="right-pane">
<div class="action-pane chat-body-area">chat-body</div>
<div class="action-pane chat-input-area">chat-input</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment