Fit child divs inside of parent div-CodePudding

I'm trying to create this.

But this is what I end up with. Currently, the child div's are overflowing the parent div.
Is there a way in CSS to fit the child element inside of the parent element?
Or is there a better approach to recreate this image?

.blue {
            background-color: blue;
            flex: 1;

        }

        .orange {
            background-color: orange;
            flex: 1;
        }

        .yellow {
            background-color: yellow;
            flex: 1;
        }

        .green {
            background-color: green;
            flex: 1;
        }

        .red {
            background-color: red;
            flex: 1;
        }

        .container {
            background: #cfcfcf;
            width: 128px;
            height: 128px;
            border-radius: 64px;
            border: 2px solid #000;
            display: flex;

        }

<html>

<body>
        <div >
            <div >&nbsp;</div>
            <div >&nbsp;</div>
            <div >&nbsp;</div>
            <div >&nbsp;</div>
            <div >&nbsp;</div>
        </div>
</body>

</html>

CodePudding user response：

Just add overflow: auto; to the container

.blue {
            background-color: blue;
            flex: 1;

        }

        .orange {
            background-color: orange;
            flex: 1;
        }

        .yellow {
            background-color: yellow;
            flex: 1;
        }

        .green {
            background-color: green;
            flex: 1;
        }

        .red {
            background-color: red;
            flex: 1;
        }

        .container {
            background: #cfcfcf;
            width: 128px;
            height: 128px;
            border-radius: 64px;
            border: 2px solid #000;
            display: flex;
            overflow: auto;

        }

<html>

<body>
        <div >
            <div >&nbsp;</div>
            <div >&nbsp;</div>
            <div >&nbsp;</div>
            <div >&nbsp;</div>
            <div >&nbsp;</div>
        </div>
</body>

</html>