CSS: scale float div width 100% until 2 float divs of min-width can fit the width

Question

I'm having some trouble with CSS as I don't use it regularly. The problem is the following: I have multiple float objects of the same size. To keep the design responsive a smartphone might display these float objects vertically. On a larger screen though, the float objects might be displayed next to one another.

To maximize the visibility on a smartphone the float objects should take up all of the width (100%). I added a min-width and max-width. The max-width is 2 times the min-width. We start off by having the float objects vertically aligned. When the horizontal screen size increases, the width of the objects fill the screen but as soon as the object reaches the max-width it should display 2 of those float objects next to another with min-width, and so on. Any idea on how to do this exactly?

Thank you so much!

Answer 1

Since no code to use , here a simple example with flex and min-width:

With 3 children at min-width:300px , here we have a break point at 900px, then at 600px, then body will show a scrollbar beloww 300px width. mediaqueries are unnecessary here .

 body /* or whatever container you use */{ display:flex; flex-wrap:wrap; } div { flex:1; min-width:300px;/* first break point at 300px x number of divs */ background:turquoise; } div + div { background:tomato; } div:last-of-type { background:gold; } 

 <div>one</div> <div>two</div> <div>three</div> 

codepen to play with