Responsive design for divs-CodePudding

I have the following HTML code (the number of divs within the .container can vary).
I want to give these a min width, but otherwise these should fill up the whole width of the screen. When the width of the screen is too small (for responsive designs) the divs should simply go on a new line.
It seems simple, but I've been banging my head with gird, flex and even float, but nothing seems to work. Anybody can help without using media queries?

<div >
    <div>pippo</div>
    <div>pluto</div>
    <div>paperino</div>
    <div>topolino</div>
</div>

CodePudding user response：

with flex-wrap: wrap; when there was no space for div, div wrap to the next line.

also i use justify-content: space-between; to fill up the whole width of the screen

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}

<div >
  <div>pippo</div>
  <div>pluto</div>
  <div>paperino</div>
  <div>topolino</div>
</div>