wanted to shrink more
    // than the item's base size). As a negative value would break the grid track template
    // offset all values so they're all positive.
    const offsetBy = sizes.reduce(
      (acc, curr) => (curr.size < acc ? curr.size : acc),
      0
    );
    sizes = sizes.map(entry => ({
      size: entry.size - offsetBy,
      name: entry.name,
    }));

    let gridTemplateColumns = "[";
    let accumulatedSize = 0;
    for (const { name, size } of sizes) {
      const breadth = Math.round(size - accumulatedSize);
      if (breadth === 0) {
        gridTemplateColumns += ` ${name}`;
        continue;
      }

      gridTemplateColumns += `] ${breadth}fr [${name}`;
      accumulatedSize = size;
    }
    gridTemplateColumns += "]";

    // Check the final and basis points to see if they are the same and if so, combine
    // them into a single rendered point.
    const renderedBaseAndFinalPoints = [];
    if (mainFinalSize === mainBaseSize) {
      renderedBaseAndFinalPoints.push(
        this.renderPoint("basisfinal", "basis/final")
      );
    } else {
      renderedBaseAndFinalPoints.push(this.renderPoint("basis"));
      renderedBaseAndFinalPoints.push(this.renderPoint("final"));
    }

    return dom.div(
      { className: "flex-outline-container" },
      dom.div(
        {
          className:
            `flex-outline ${mainAxisDirection}` +
            (mainDeltaSize > 0 ? " growing" : " shrinking"),
          style: {
            gridTemplateColumns,
          },
        },
        renderedBaseAndFinalPoints,
        showMin ? this.renderPoint("min") : null,
        showMax ? this.renderPoint("max") : null,
        this.renderBasisOutline(mainBaseSize),
        this.renderDeltaOutline(mainDeltaSize),
        this.renderFinalOutline(clampState !== "unclamped")
      )
    );
  }
}

module.exports = FlexItemSizingOutline;
PK