You have a point. I'd say my article is imprecise in that regard.

A widget doesn't need to create a RenderObject. It can, instead, use a composition of other widgets that create RenderObjects themselves.

If a widget is a composition of other widgets, then instead of looking at the performLayout you can simply look at that widget's build method to see what it's doing. In the case of a Container, this is its build method:

Widget build(BuildContext context) {
    Widget? current = child;

    if (child == null && (constraints == null || !constraints!.isTight)) {
      current = LimitedBox(
        maxWidth: 0.0,
        maxHeight: 0.0,
        child: ConstrainedBox(constraints: const BoxConstraints.expand()),
      );
    }

    if (alignment != null)
      current = Align(alignment: alignment!, child: current);

    final EdgeInsetsGeometry? effectivePadding = _paddingIncludingDecoration;
    if (effectivePadding != null)
      current = Padding(padding: effectivePadding, child: current);

    if (color != null)
      current = ColoredBox(color: color!, child: current);

    if (clipBehavior != Clip.none) {
      assert(decoration != null);
      current = ClipPath(
        clipper: _DecorationClipper(
          textDirection: Directionality.maybeOf(context),
          decoration: decoration!,
        ),
        clipBehavior: clipBehavior,
        child: current,
      );
    }

    if (decoration != null)
      current = DecoratedBox(decoration: decoration!, child: current);

    if (foregroundDecoration != null) {
      current = DecoratedBox(
        decoration: foregroundDecoration!,
        position: DecorationPosition.foreground,
        child: current,
      );
    }

    if (constraints != null)
      current = ConstrainedBox(constraints: constraints!, child: current);

    if (margin != null)
      current = Padding(padding: margin!, child: current);

    if (transform != null)
      current = Transform(transform: transform!, alignment: transformAlignment, child: current);

    return current!;
  }

As you can see, it is defined in terms of other widgets. And these widgets may also be defined in terms of other widgets and so on. But at some point you will reach the widgets that create the RenderObjects.

Regarding the reason why the Container is not 20x20, it's because, as the article explains, sizes are set by parents. So the Containers size is set by the Container's parent, which in this case is the screen. And the screen always forces its child to occupy all the available space, in this case ignoring the Container's desire to be 20x20. The fix here is giving the Container another parent. One which allows the Container to choose its own size. For example, both Center and Align will let that happen, and that's why you can fix the problem by doing:

void main() {
  runApp(
    Center( 
      child: Container(
        color: Colors.red,
        width: 20,
        height: 20,
      ),),);
}

As to why the screen forces its child to occupy all the available space: That's just the way Flutter creators decided it should be. If you dig into Flutter's code you will find it there. But it's probably best that you just remember this fact.

Hope it helps!

Meh, don't get too complex yet. here is simplest thing i can explain to you, lets separate an application into 4 different layer.

1. Application -> You can use MaterialApp to create an material application
2. Widget Pages -> You can choose between using Stateless or StatefulWidget, it depends on your need. If you need dynamic, with a a lot of changing states you can use StatefulWidget or you can create a static page with StatelessWidget.
3. Scaffold -> Widget pages must return a scaffold in order to form an material pages, here you can use Scaffold, you can add appBar, fab, body, bottomNavigationBar & etc.
4. Widgets -> Here the widgets can be anything, it's can be an appBar for your scaffold appBar, or ListView, GridView or Custom widget.

So your code must be look like this, kind of

/// This block is the first point of your application, this will run your application
void main() {
  runApp(myApp());
}

/// Then you need an material app, this part should return your app
class MyApp extends StatelessWidget{

  /// This is very important, both StatelessWidget / StatefullWidget 
  /// always having a build method. It's should returning a Widget. But in this case we will return an material application
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      home: MyHome(),
    ),
  }
}

class MyHome extends StatelessWidget{

  /// This is home page, it's have Scaffold so the page will using, material guidelines. 
  @override
  Widget build(BuildContext context){
    return Scaffold(
       body:Container(
         color: Colors.red,
         width: 20,
         height: 20,
       ),
    );
  }
}