flex-box nesting vs perf

by larsolesimonsen

HTML

<div class="outer">
  <div class="container">
    <div class="genericlist">
      <div class="header">The header <button type="button" id="button">Trigger layouting</button></div>
      <div class="content">
      </div>
      <div class="footer">The footer</div>
    </div>
  </div>
</div>

CSS

.outer { height: 400px; }
.container {
  height: 75%;
  display: flex;
  flex-direction: column;
  background-color: red;
}
.genericlist {
  display: none;
  flex-grow: 1;
  flex-basis: 200px;
  display: flex;
  flex-direction: column;
}
.header {
  flex-basis: 36px;
  background-color: green;
}
.content {
  background-color: blue;
  flex-grow: 1;
  flex-basis: 200px;
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.row {
  flex-basis: 100px;
  flex-shrink: 0;
  display: flex;
}
.footer {
  position:absolute;
  right: 0;
  bottom: 0;
  background-color: yellow;
}

JavaScript

var contentElt = document.getElementsByClassName("content")[0]
var buttonElt = document.getElementById("button");
buttonElt.addEventListener("click", function() {
	addRow();
});

var numRows = 0;
function addRow() {
	var rowElt = document.createElement("div");
  rowElt.className = "row";
  for(var col = 0; col < 50; col++) {
  	var cellElt = document.createElement("span");
    cellElt.textContent = "Cell" + numRows + "/" + col;
    rowElt.appendChild(cellElt);
  }
	contentElt.appendChild(rowElt);
	numRows++
}

for(var i = 0; i < 500; i++) {
  addRow();
}