Inside shape is not stretching as per parent shape

Here is a group panel provided the inside shape is not being streching, even after giving strectch to fill
Code is given below
Motive: I want to stretch the yellow shape as per the width of the parent
image

$(
      go.Group,
      "Auto",
      new go.Binding("location", "loc", go.Point.parse).makeTwoWay(
        go.Point.stringify
      ),
      {
        contextMenu: contextMenuRef.myContextMenu,
        resizeObjectName: "BODY",
        selectionObjectName: "BODY",
        computesBoundsAfterDrag: true,
        avoidable: false,
      },
      $(
        go.Panel,
        "Auto",
        {},
        $(
          go.Shape,
          "RoundedRectangle", // outer rounded rectangle surrounds everything
          {
            fill: GRAPH_CONFIG.SHAPE_COLORS.transparent,
            strokeWidth: 1,
            stroke: GRAPH_CONFIG.SHAPE_COLORS.lightGrayBorder,
          },
          new go.Binding("minSize", "size", go.Size.parse).makeTwoWay()
        )
      ),
      $(
        go.Panel,
        "Vertical",
        {
          defaultAlignment: go.Spot.TopCenter,
        },
        $(
          go.Panel,
          "Auto", // the header
          { defaultAlignment: go.Spot.TopCenter },
          $(go.Shape, "RoundedTopRectangle", {    //rectangle covering the text area
            stroke: GRAPH_CONFIG.SHAPE_COLORS.lightGrayBorder,
            strokeWidth: 1,
            stretch: go.GraphObject.Fill,
            fill: GRAPH_CONFIG.SHAPE_COLORS.transparentYellow
          },
            new go.Binding("minSize", "size", (data) => {
              return new go.Size(data.width, 30)
            }).makeTwoWay()
          ),
          $(go.TextBlock,
            {
              font: "14px Sans-Serif",
              margin: new go.Margin(6, 0, 5, 0),
              editable: true,
              verticalAlignment: go.Spot.Center,
              textAlign: "center",
            },
            new go.Binding("text", "text").makeTwoWay(),
          )
        ),

        $(go.Panel, "Auto",
          $(go.Shape, "RoundedBottomRectangle", {  //container rectangle covering the placeholder
            fill: GRAPH_CONFIG.SHAPE_COLORS.transparent,
            strokeWidth: 1,
            stroke: GRAPH_CONFIG.SHAPE_COLORS.lightGrayBorder,
            name: "SUBPROCESS_BODY",
          },
            new go.Binding("minSize", "size", (data) => {
              return new go.Size(data.width, data.height)
            }).makeTwoWay()
          ),
          $(go.Placeholder, { padding: new go.Margin(5, 5, 0, 0), },)
        ),
      ),

    );
  }

It might help you if you used go-debug.js instead of go.js. (Or the ES module version of that library.)

Why do you have an “Auto” Panel using the “RoundedRectangle” Shape but not surrounding any elements? Delete:

       $(
        go.Panel,
        "Auto",
        {},

(and corresponding close-parenthesis, of course)

The “Auto” Panel using the “RoundedTopRectangle” Shape as a border doesn’t have { stretch: go.GraphObject.Horizontal }, so it doesn’t stretch horizontally.

You do set stretch on the “RoundedTopRectangle” Shape, but that doesn’t matter because the “Auto” Panel is controlling its size.

I tried with { stretch: go.GraphObject.Horizontal } it doesnt work and also removed panel auto.

$(
      go.Group,
      "Auto",
      {
        locationSpot: go.Spot.Center,
        contextMenu: contextMenuRef.myContextMenu,
        resizeObjectName: "BODY",
        selectionObjectName: "BODY",
        computesBoundsAfterDrag: true,
        avoidable: false,
        }
      },
      new go.Binding("location", "loc", go.Point.parse).makeTwoWay(
        go.Point.stringify
      ),
      // $(
      //   go.Panel,
      //   "Auto",
      $(
        go.Shape,
        "RoundedRectangle", // outer rounded rectangle surrounds everything
        {
          fill: GRAPH_CONFIG.SHAPE_COLORS.transparent,
          strokeWidth: 1,
          stretch: go.GraphObject.Horizontal,
          stroke: GRAPH_CONFIG.SHAPE_COLORS.lightGrayBorder,
        },
        new go.Binding("minSize", "size", go.Size.parse).makeTwoWay()
      ),
      // ),
      $(
        go.Panel,
        "Vertical",
        {
          defaultAlignment: go.Spot.TopCenter,
        },
        $(
          go.Panel,
          { defaultAlignment: go.Spot.TopCenter },
          $(go.Shape, "RoundedTopRectangle", {    //rectangle covering the text area
            stroke: GRAPH_CONFIG.SHAPE_COLORS.lightGrayBorder,
            strokeWidth: 1,
            stretch: go.GraphObject.Horizontal,
            fill: GRAPH_CONFIG.SHAPE_COLORS.transparentYellow
          },
            new go.Binding("desiredSize", "size", (data) => {
              return new go.Size(data.width, 30)
            }).makeTwoWay()
          ),
          $(go.TextBlock,
            {
              font: "14px Sans-Serif",
              margin: new go.Margin(6, 0, 5, 0),
              editable: true,
              verticalAlignment: go.Spot.Center,
              textAlign: "center",
            },
            new go.Binding("text", "text").makeTwoWay(),
          )
        ),

        $(go.Panel, "Auto",
          $(go.Shape, "RoundedBottomRectangle", {  //container rectangle covering the placeholder
            fill: GRAPH_CONFIG.SHAPE_COLORS.transparent,
            strokeWidth: 1,
            stroke: GRAPH_CONFIG.SHAPE_COLORS.lightGrayBorder,
            name: "SUBPROCESS_BODY",
          },
            new go.Binding("minSize", "size", (data) => {
              return new go.Size(data.width, data.height)
            }).makeTwoWay()
          ),
          $(go.Placeholder, { padding: new go.Margin(5, 5, 0, 0), },)
        ),
      ),
    );
  }

this is how its looking.
Can you provide me any other solution, Thanks

You did not set stretch: go.GraphObject.Horizontal.

I did add strech in the rectangle

Please reread: