Skip to content

Instantly share code, notes, and snippets.

@andrey-shikhov

andrey-shikhov/css-flexbox-grow.html

Created November 15, 2016 18:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save andrey-shikhov/78d24b0724b1cc5f5690c2aa3597ddab to your computer and use it in GitHub Desktop.
Save andrey-shikhov/78d24b0724b1cc5f5690c2aa3597ddab to your computer and use it in GitHub Desktop.
Download ZIP
Raw
css-flexbox-grow.html
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
justify-content: center;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
align-self: center;
padding: 8px;
flex-grow: 1;
}
.flex-item2 {
background-color: magenta;
width: 100%;
}
</style>
</head>
<body>
<div style="width:300px;height:300px; background-color: cyan">
<div class="flex-container">
<div class="flex-item">
<div class="flex-item2">some test text</div>
</div>
<div class="flex-item">
<div class="flex-item2">some test text</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment