--- a/devtools/server/actors/highlighters/flexbox.js
+++ b/devtools/server/actors/highlighters/flexbox.js
@@ -510,66 +510,54 @@ class FlexboxHighlighter extends AutoRef
       return;
     }
 
     let { bounds } = this.currentQuads.content[0];
     let flexLines = this.currentNode.getAsFlexContainer().getLines();
     let computedStyle = getComputedStyle(this.currentNode);
     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;
+      let mainStart = 0;
 
-      if (isColumn) {
-        this.drawJustifyContent(crossStart, 0, crossStart + crossSize, bounds.height);
-      } else {
-        this.drawJustifyContent(0, crossStart, bounds.width, crossStart + crossSize);
-      }
-    }
-
-    // Then, cut all the items out of this content area.
-    for (let flexLine of flexLines) {
       let flexItems = flexLine.getItems();
-
       for (let flexItem of flexItems) {
         let { node } = flexItem;
 
         let quads = getAdjustedQuads(this.win, node, "margin");
-
         if (!quads.length) {
           continue;
         }
 
         // 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 (isColumn) {
-          clearRect(this.ctx, crossStart, top, crossSize + crossStart, bottom,
-            this.currentMatrix);
+          this.drawJustifyContent(crossStart, mainStart, crossStart + crossSize, top);
+          mainStart = bottom;
         } else {
-          clearRect(this.ctx, left, crossStart, right, crossSize + crossStart,
-            this.currentMatrix);
+          this.drawJustifyContent(mainStart, crossStart, left, crossStart + crossSize);
+          mainStart = right;
         }
       }
+
+      // Draw the last justify-content area after the last item.
+      if (isColumn) {
+        this.drawJustifyContent(crossStart, mainStart, crossStart + crossSize,
+          bounds.height);
+      } else {
+        this.drawJustifyContent(mainStart, crossStart, bounds.width,
+          crossStart + crossSize);
+      }
     }
-
-    this.ctx.restore();
   }
 
   _update() {
     setIgnoreLayoutChanges(true);
 
     let root = this.getElement("root");
 
     // Hide the root element and force the reflow in order to get the proper window's