CODEWITHSUNDEEP
htmlcss
dapidmini
dapidmini

Reputation: 1625

css to keep aspect ratio of 1:1 (square) based on parent height

I'm trying to make a calendar-like display where the dates' boxes are square-shaped but the whole calendar itself cannot have any scrolling..

it's supposed to look like this:

----------------------------------
|         header element         |
|--------------------------------|
|     additional element         |
|--------------------------------|
|       -----------------        | --> start calendar (.box_fit-container)
|       |sun|mon|tue|wed|        |
|       -----------------        |
|       |d1 |d2 |d3 |d4 |        |
|       |d1 |d2 |d3 |d4 |        |
|       |d1 |d2 |d3 |d4 |        | --> bottom of screen/viewport 
|       |d1 |d2 |d3 |d4 |        |     where it usually starts scrolling
|       |d1 |d2 |d3 |d4 |        |
|       -----------------        |
----------------------------------

I managed to create the outer "frame" by using flex so that the outer container fills the remaining height of the original viewport, and I can also create an individual square shape, thanks to various SO contributors. but for whatever reason, I can't create a square shape where the object's width follows it's parent's height.

these are the code I have so far:

.box_fit-container {
  display: flex;
  flex-direction: column;
  height: 80vh; /* this was supposed to be 100% according to the SO source I found, but since I'm working on a legacy code and there are other elements above this new one so I changed into 80vh to fit as close as possible */
}
.box_fit-header {
  flex: 0 1 auto;
}
.box_fit-content {
  flex: 1 1 auto;
}
.square-box {
  position: relative;
  width: 100%;
  padding-top: 100%;
}
<div class="container">
  <div class="box_fit-container">
    <div class="box_fit-header">
      <div>some header content
    </div>
    <div class="box_fit-content">
      <!-- 
      I need this .square-box elem to be square-shaped 
      but doesn't overflow outside the .box_fit-content 
      -->
      <div class="square-box"></div>
    </div>
  </div>
</div>

Upvotes: 5

Views: 1542

Answers (1)

Temani Afif
Temani Afif

Reputation: 274318

If you can identify the height of the header or this one will always be fixed you can consider max-width to be 80vh - height of header

.box_fit-container {
  display: flex;
  flex-direction: column;
  height: 80vh; /* this was supposed to be 100% according to the SO source I found, but since I'm working on a legacy code and there are other elements above this new one so I changed into 80vh to fit as close as possible */
  border:1px solid;
}
.box_fit-header {
  flex: 0 1 auto;
  border:1px solid red;
}
.box_fit-content {
  flex: 1 1 auto;
  border:1px green;
}
.square-box {
  position: relative;
  width: 100%;
  margin:auto;
  max-width:calc(80vh - 25px);
  border:2px solid;
}
.square-box:before {
  content:"";
  display:inline-block;
  padding-top: 100%;
}

* {
 box-sizing:border-box;
}
<div class="container">
  <div class="box_fit-container">
    <div class="box_fit-header">
      <div>some header content
    </div>
    <div class="box_fit-content">
      <!-- 
      I need this .square-box elem to be square-shaped 
      but doesn't overflow outside the .box_fit-content 
      -->
      <div class="square-box"></div>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions