How to get all sibling div's inside overlapping div area?

I have a large div and smaller siblings divs positioned inside it like this:

.large{
  height:20rem;
  width:20rem;
  background-color:red;
  position:absolute;
}

.item1{
  height:5rem;
  width:5rem;
  background-color:blue;
  top:1rem;
  position:absolute;
}

.item2{
  height:5rem;
  width:5rem;
  background-color:green;
  top:3rem;
  left:2rem;
  position:absolute;
}

.item3{
  height:5rem;
  width:5rem;
  background-color:yellow;
  top:1rem;
  left:6rem;
  position:absolute;
}

<div class="large"></div>
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>

How do I get all the small divs within the large div dimensions?
Is there something similar to elementsFromPoint? Maybe something like elementsFromArea

Edit:

assume .large spans 320 pixels x 320 pixels
and I have multiple smaller divs on my screen, which can either be overlapping .large or outside it

How do I find divs which are overlapping .large?

Maybe we could get the position of .large & we already have the height and width of it and add it to some function like this:

elementsFromArea(large_x,large_y,large_height,large_width);

This should return an array of all the divs within that given range

(.large is merely for reference sake, I simply want to pass any given square area & find all the divs lying within it )

Bounty Edit:

The solution provided by @A Haworth works but I'm looking for a solution which doesn't involve having to loop and check every single element

this fiddle explains what I'm ultimately trying to achieve

Any clever work around will be accepted too!

from How to get all sibling div's inside overlapping div area?