--- a/devtools/server/actors/highlighters/flexbox.js
+++ b/devtools/server/actors/highlighters/flexbox.js
@@ -58,16 +58,19 @@ const JUSTIFY_CONTENT = "justify-content
 /**
  * The FlexboxHighlighter is the class that overlays a visual canvas on top of
  * display: [inline-]flex elements.
  *
  * Available Options:
  * - showAlignment(isShown)
  *   @param  {Boolean} isShown
  *   Shows the alignment in the flexbox highlighter.
+ * - showFlexBasis(isShown)
+ *   @param  {Boolean} isShown
+ *   Shows the flex basis in the flexbox highlighter.
  */
 class FlexboxHighlighter extends AutoRefreshHighlighter {
   constructor(highlighterEnv) {
     super(highlighterEnv);
 
     this.ID_CLASS_PREFIX = "flexbox-";
 
     this.markup = new CanvasFrameAnonymousContentHelper(this.highlighterEnv,
@@ -531,17 +534,17 @@ class FlexboxHighlighter extends AutoRef
     this.ctx.stroke();
     this.ctx.restore();
   }
 
   /**
    * Renders the flex basis for a given flex item.
    */
   renderFlexItemBasis(flexItem, left, top, right, bottom, boundsWidth) {
-    if (!this.computedStyle) {
+    if (!this.options.showFlexBasis || !this.computedStyle) {
       return;
     }
 
     let basis = this.flexBasis;
 
     if (basis.endsWith("px")) {
       right = Math.round(left + parseFloat(basis));
     } else if (basis.endsWith("%")) {