in this example:https://jsbin.com/sehuqowuca/edit?html,css,output
if I resized the view to be between 508px and 334px there is a horizontal space left and I can't fill it because of item2 height taking the whole row
How to get rid of this horizontal space and make item-3 fill that gap like this: https://imgur.com/a/x2EUmg3,can I do such a thing with flex-box or I need to use a grid layout and if so how would I achieve it using grid ?
.flex-container{ border:1px solid red; border-radius:5px; padding:1rem; display:flex; align-items:flex-start; justify-content:flex-start; gap:4rem; flex-wrap:wrap;}.flex-item{ border:1px solid lightblue; padding: .5rem; border-radius:5px}<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>JS Bin</title></head><body><div class="flex-container"><div class="flex-item item-1"><h1>item1</h1><h1>item1</h1></div><div class="flex-item item-2"><h1>item2</h1><h1>item2</h1><h1>item2</h1><h1>item2</h1><h1>item2</h1><h1>item2</h1></div><div class="flex-item item-3"><h1>item3</h1><h1>item3</h1><h1>item3</h1><h1>item3</h1><h1>item3</h1><h1>item3</h1></div></div></body></html>