How to make HTML element square

Question

I would like to have square tiles in my react calendar. Currently width is calculated based on width of the whole calendar and I would like my height to be the same.

Html

<button class="react-calendar__tile react-calendar__tile--active react-calendar__tile--range react-calendar__tile--rangeStart react-calendar__tile--rangeEnd react-calendar__tile--rangeBothEnds react-calendar__month-view__days__day" type="button" style="flex: 0 0 14.2857%; overflow: hidden;">
    <abbr aria-label="July 14, 2022">14</abbr>
</button>

I have tried this

.booking-calendar .react-calendar__tile {
    flex: 0 0 14.2857%;
    overflow: hidden;
}
.booking-calendar .react-calendar__tile--active abbr {
    outline: 2px solid #444444;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 40px;
    font-weight: 700;
}

.booking-calendar .react-calendar__month-view__days__day abbr {
    padding: 10px;
    border-radius: 40px;
    display: inline-block;
    vertical-align: middle;
}

There's the [aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) css property; it's got [good support now](https://caniuse.com/mdn-css_properties_aspect-ratio), but a substantial number of people are pre-Safari 15. See [this Stack Overflow answer](https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css) for a more universal approach. — Auroratide, May 26 '22 at 12:00

Ronny vdb · Answer 1 · 2022-05-26T12:31:45.713

You can use the aspect-ration css property https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

.booking-calendar  {
    width: 400px;
    display: flex;
}

.booking-calendar .react-calendar__tile {
    width: 100%;
    aspect-ratio: 1 / 1;
    margin: 10px;
}


.booking-calendar .react-calendar__tile--active abbr {
    outline: 2px solid #444444;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 40px;
    font-weight: 700;
}

.booking-calendar .react-calendar__month-view__days__day abbr {
    padding: 10px;
    border-radius: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

<div class="booking-calendar">
     <button class="react-calendar__tile react-calendar__tile--active react-calendar__tile--range react-calendar__tile--rangeStart react-calendar__tile--rangeEnd react-calendar__tile--rangeBothEnds react-calendar__month-view__days__day" type="button" style="overflow: hidden;">
    <abbr aria-label="July 11, 2022">11</abbr>
</button>
  <button class="react-calendar__tile react-calendar__tile--active react-calendar__tile--range react-calendar__tile--rangeStart react-calendar__tile--rangeEnd react-calendar__tile--rangeBothEnds react-calendar__month-view__days__day" type="button" style="overflow: hidden;">
    <abbr aria-label="July 12, 2022">12</abbr>
</button>
  <button class="react-calendar__tile react-calendar__tile--active react-calendar__tile--range react-calendar__tile--rangeStart react-calendar__tile--rangeEnd react-calendar__tile--rangeBothEnds react-calendar__month-view__days__day" type="button" style="overflow: hidden;">
    <abbr aria-label="July 13, 2022">13</abbr>
</button>
  <button class="react-calendar__tile react-calendar__tile--active react-calendar__tile--range react-calendar__tile--rangeStart react-calendar__tile--rangeEnd react-calendar__tile--rangeBothEnds react-calendar__month-view__days__day" type="button" style="overflow: hidden;">
    <abbr aria-label="July 14, 2022">14</abbr>
</button>
</div>

You will need to remove the flex inline style that collides with the aspect-ratio effect.

How to make HTML element square

1 Answers1