<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="parent flex-grid">
<div class="flex-grid flex-grid--item">
<div class="flex-grid flex-grid--item">
<div class="flex-grid flex-grid--item">
<div class="flex-grid flex-grid--item">
<div class="flex-grid flex-grid--item">
<div class="flex-grid flex-grid--item">
<div class="flex-grid flex-grid--item">
<div class="flex-grid flex-grid--item">
<div class="flex-grid flex-grid--item">
<div class="flex-grid flex-grid--item">
<div class="flex-grid flex-grid--item">
<div class="flex-grid flex-grid--item">
<div class="flex-grid flex-grid--item">
<div class="flex-grid flex-grid--item">
<div contenteditable>Try typing in here in Firefox</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
/* Styles go here */
.parent {
height: 300px;
}
.flex-grid {
display: -webkit-box;
}
.flex-grid--item {
-webkit-box-flex: 1;
}