How to make grid columns equal width and equal to maximum max-content of the items?

I have n children items in a container grid and each child can have different width.

1. I want to arrange them in css grid such that each column width is equal.
2. The width of column would be the maximum of the width among the children.

I would think

.container {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(max-content, 1fr));}

will do it but it does not work:

.container {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(max-content, 1fr));}

<div class="container"><div class="children"> Very long text </div><div class="children"> long text </div><div class="children"> text</div><div class="children"> text</div><div class="children"> text</div><div class="children"> text</div></div>

In the case above, if only 2 columns fitted, I would expect the layout to be something below.

Very long text | long text     |text           | text          |text.          | text          | 

Similarly, if only 3 columns fitted, I would expect the layout to be something like below.

Very long text | long text     | text         |text           | text          | text         | 

In both case above, "very long text" has the maximum max-content and it would determine the width of the columns.

What would be the easiest way to achieve this layout ?