--- a/devtools/server/actors/highlighters/flexbox.js
+++ b/devtools/server/actors/highlighters/flexbox.js
@@ -456,23 +456,23 @@ class FlexboxHighlighter extends AutoRef
     this.ctx.save();
     this.ctx.translate(offset - canvasX, offset - canvasY);
     this.ctx.lineWidth = lineWidth;
     this.ctx.strokeStyle = DEFAULT_COLOR;
 
     let { bounds } = this.currentQuads.content[0];
     let flexLines = this.currentNode.getAsFlexContainer().getLines();
     let computedStyle = getComputedStyle(this.currentNode);
-    let direction = computedStyle.getPropertyValue("flex-direction");
+    let isColumn = computedStyle.getPropertyValue("flex-direction").startsWith("column");
     let options = { matrix: this.currentMatrix };
 
     for (let flexLine of flexLines) {
       let { crossStart, crossSize } = flexLine;
 
-      if (direction.startsWith("column")) {
+      if (isColumn) {
         clearRect(this.ctx, crossStart, 0, crossStart + crossSize, bounds.height,
           this.currentMatrix);
 
         // Avoid drawing the start flex line when they overlap with the flex container.
         if (crossStart != 0) {
           drawLine(this.ctx, crossStart, 0, crossStart, bounds.height, options);
           this.ctx.stroke();
         }
@@ -506,81 +506,69 @@ class FlexboxHighlighter extends AutoRef
   }
 
   renderJustifyContent() {
     if (!this.currentQuads.content || !this.currentQuads.content[0]) {
       return;
     }
 
     let { bounds } = this.currentQuads.content[0];
-    let flexItems = this.currentNode.children;
     let flexLines = this.currentNode.getAsFlexContainer().getLines();
     let computedStyle = getComputedStyle(this.currentNode);
-    let direction = computedStyle.getPropertyValue("flex-direction");
+    let isColumn = computedStyle.getPropertyValue("flex-direction").startsWith("column");
 
     // Render the justify-content area by first highlighting all the content, and
     // clearing the occupied and margin areas of the flex item.
 
     // First, highlight all the content.
     for (let flexLine of flexLines) {
       let { crossStart, crossSize } = flexLine;
 
-      if (direction.startsWith("column")) {
+      if (isColumn) {
         this.drawJustifyContent(crossStart, 0, crossStart + crossSize, bounds.height);
       } else {
         this.drawJustifyContent(0, crossStart, bounds.width, crossStart + crossSize);
       }
     }
 
-    for (let flexItem of flexItems) {
-      let quads = getAdjustedQuads(this.win, flexItem, "border");
+    // Then, cut all the items out of this content area.
+    for (let flexLine of flexLines) {
+      let flexItems = flexLine.getItems();
 
-      if (!quads.length) {
-        continue;
-      }
+      for (let flexItem of flexItems) {
+        let { node } = flexItem;
+
+        let quads = getAdjustedQuads(this.win, node, "margin");
 
-      // Adjust the flex item bounds relative to the current quads.
-      let { bounds: flexItemBounds } = quads[0];
-      let left = Math.round(flexItemBounds.left - bounds.left);
-      let top = Math.round(flexItemBounds.top - bounds.top);
-      let right = Math.round(flexItemBounds.right - bounds.left);
-      let bottom = Math.round(flexItemBounds.bottom - bounds.top);
-      let flexItemComputedStyle = getComputedStyle(flexItem);
+        if (!quads.length) {
+          continue;
+        }
 
-      // Clear the occupied and margin areas of the flex item.
-      for (let flexLine of flexLines) {
+        // Adjust the flex item bounds relative to the current quads.
+        let { bounds: flexItemBounds } = quads[0];
+        let left = Math.round(flexItemBounds.left - bounds.left);
+        let top = Math.round(flexItemBounds.top - bounds.top);
+        let right = Math.round(flexItemBounds.right - bounds.left);
+        let bottom = Math.round(flexItemBounds.bottom - bounds.top);
+
+        // Clear the occupied and margin areas of the flex item.
         let { crossStart, crossSize } = flexLine;
         crossSize = Math.round(crossSize);
         crossStart = Math.round(crossStart);
 
-        if (direction.startsWith("column") &&
-            crossStart <= left &&
-            left <= right &&
-            right <= crossSize + crossStart) {
-          // Remove the margin area for justify-content
-          let marginTop = Math.round(parseFloat(
-            flexItemComputedStyle.getPropertyValue("margin-top")));
-          let marginBottom = Math.round(parseFloat(
-            flexItemComputedStyle.getPropertyValue("margin-bottom")));
-          clearRect(this.ctx, crossStart, top - marginTop, crossSize + crossStart,
-            bottom + marginBottom, this.currentMatrix);
-          break;
-        } else if (crossStart <= top &&
-                   top <= bottom &&
-                   bottom <= crossSize + crossStart) {
-          let marginLeft = Math.round(parseFloat(
-            flexItemComputedStyle.getPropertyValue("margin-left")));
-          let marginRight = Math.round(parseFloat(
-            flexItemComputedStyle.getPropertyValue("margin-right")));
-          clearRect(this.ctx, left - marginLeft, crossStart, right + marginRight,
-            crossSize + crossStart, this.currentMatrix);
-          break;
+        if (isColumn) {
+          clearRect(this.ctx, crossStart, top, crossSize + crossStart, bottom,
+            this.currentMatrix);
+        } else {
+          clearRect(this.ctx, left, crossStart, right, crossSize + crossStart,
+            this.currentMatrix);
         }
       }
     }
+
     this.ctx.restore();
   }
 
   _update() {
     setIgnoreLayoutChanges(true);
 
     let root = this.getElement("root");