I have a rectangle area on my page that needs to be filled with a square in the center. This rectangle can be both horizontal and vertical. This means that the plethora of existing questions based on making a square from just the width of a containing box don't work. [[1]](https://stackoverflow.com/q/5445491) [[2]](https://stackoverflow.com/q/1495407)

This square can also change dynamically and this approach doesn't resize the square. I'd also like to not use JavaScript or JQuery if possible. This is the only thing that I'd use JQuery for.

Below you can see what the code should do at the beginning, but when you resized the box it doesn't resize the square.

```js
/* based on https://stackoverflow.com/a/5445536*/
$('.body').resizable();
var containingBlock = $('.box-rect');
var cmin = Math.min(containingBlock.width(), containingBlock.height());

$('#box-square').css({
  'height': cmin+'px',
  'width': cmin+'px'
});
```

```css
.body{
  width: 200px;
  height: 100px;
}

.box-rect {
  width: 100%;
  height: 100%;
  min-width: 50px;
  min-height: 50px;

  display: flex;
  justify-content: center;
  align-items: center;

  /* example bounding box */
  border: 1px solid gray;
}

.box-square {
  width: 50px; /* min(box-rect.height, box-rect.width) */
  height: 50px; /* box-rect min */
}

/*
The following is using a mix between the following two answers:
https://stackoverflow.com/a/6615994
https://stackoverflow.com/a/20117454
*/
.box-reset {
  position: relative;
  height: 100%;
  width: 100%;
}

.box-reset:before {
  content: "";
  display: block;
  padding-top: 100%;
}

.box {
  position:  absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

  /* example gray box */
  height: 100%;
  background-color: gray;
}
```

```html
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class='body'>
  <div class="box-rect">
    <div class="box-square">
      <div class="box-reset">
        <div class="box">
          Not working at all
        </div>
      </div>
    </div>
  </div>
</div>
<br />
<div class='body'>
  <div class="box-rect">
    <div class="box-square" id="box-square">
      <div class="box-reset">
        <div class="box">
          Fills to the bounds of the rectangle on load.
        </div>
      </div>
    </div>
  </div>
</div>
```

To be completely clear:

* The first example above doesn't resize the gray square at all.
* The second example resizes the gray square to the bound of the rectangle. (What I want)

However, it doesn't resize the gray square to the bound of the rectangle when resizing the containing block.

I want to resize the square to the bound of the rectangle. Like in the second example, when I resize the containing block.

I would prefer to do this all in **pure CSS**.