--- a/devtools/server/actors/highlighters/flexbox.js
+++ b/devtools/server/actors/highlighters/flexbox.js
@@ -117,16 +117,17 @@ class FlexboxHighlighter extends AutoRef
     gCachedFlexboxPattern.clear();
   }
 
   destroy() {
     let { highlighterEnv } = this;
     highlighterEnv.off("will-navigate", this.onWillNavigate);
 
     let { pageListenerTarget } = highlighterEnv;
+
     if (pageListenerTarget) {
       pageListenerTarget.removeEventListener("pagehide", this.onPageHide);
     }
 
     this.markup.destroy();
 
     // Clear the pattern cache to avoid dead object exceptions (Bug 1342051).
     this.clearCache();
@@ -367,16 +368,21 @@ class FlexboxHighlighter extends AutoRef
     this.ctx.restore();
   }
 
   /**
    * Renders the flex basis for a given flex item.
    */
   renderFlexItemBasis(flexItem, left, top, right, bottom, boundsWidth) {
     let computedStyle = getComputedStyle(flexItem);
+
+    if (!computedStyle) {
+      return;
+    }
+
     let basis = computedStyle.getPropertyValue("flex-basis");
 
     if (basis.endsWith("px")) {
       right = Math.round(left + parseFloat(basis));
     } else if (basis.endsWith("%")) {
       basis = parseFloat(basis) / 100 * boundsWidth;
       right = Math.round(left + basis);
     }
@@ -399,39 +405,44 @@ class FlexboxHighlighter extends AutoRef
 
     this.ctx.save();
     this.ctx.translate(offset - canvasX, offset - canvasY);
     this.ctx.setLineDash(FLEXBOX_LINES_PROPERTIES.item.lineDash);
     this.ctx.lineWidth = lineWidth;
     this.ctx.strokeStyle = DEFAULT_COLOR;
 
     let { bounds } = this.currentQuads.content[0];
-    let flexItems = this.currentNode.children;
+    let flexLines = this.currentNode.getAsFlexContainer().getLines();
+
+    for (let flexLine of flexLines) {
+      let flexItems = flexLine.getItems();
 
-    // TODO: Utilize the platform API that will be implemented in Bug 1414290 to
-    // retrieve the flex item properties.
-    for (let flexItem of flexItems) {
-      let quads = getAdjustedQuads(this.win, flexItem, "border");
-      if (!quads.length) {
-        continue;
-      }
+      for (let flexItem of flexItems) {
+        let { node } = flexItem;
+        let quads = getAdjustedQuads(this.win, node, "border");
+
+        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);
+        // 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);
 
-      clearRect(this.ctx, left, top, right, bottom, this.currentMatrix);
-      drawRect(this.ctx, left, top, right, bottom, this.currentMatrix);
-      this.ctx.stroke();
+        clearRect(this.ctx, left, top, right, bottom, this.currentMatrix);
+        drawRect(this.ctx, left, top, right, bottom, this.currentMatrix);
+        this.ctx.stroke();
 
-      this.renderFlexItemBasis(flexItem, left, top, right, bottom, bounds.width);
+        this.renderFlexItemBasis(node, left, top, right, bottom, bounds.width);
+      }
     }
+
     this.ctx.restore();
   }
 
   renderFlexLines() {
     if (!this.currentQuads.content || !this.currentQuads.content[0]) {
       return;
     }
 
@@ -498,16 +509,17 @@ class FlexboxHighlighter extends AutoRef
         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");
+
       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);