Css: how do you set height to 100% of the parents width

Question

I am trying to make a horizontal scroller only using css, and I have run into a problem where I need to set the height of a div element to 100% of the parent's width. Here is my sample code for the horizontal scrolling part:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
            .horizontal-scroll::-webkit-scrollbar {
                display: none;
            }
            .horizontal-scroll {
                width: 100px;
                height: 97vw;
                transform: rotate(-90deg) translateY(-100px);
                overflow-x: hidden;
                overflow-y: auto;
                border: 5px solid black;
                transform-origin: right top;
            }
            .Card {
                height: 100px;
                width: 100px;
                background-color: aliceblue;
                transform: rotate(90deg);
                display:block;
            }
        </style>
    </head>
    <body>
       <div class='horizontal-scroll'>
            <div class='Card'>1</div>
           <div class='Card'>2</div>
           <div class='Card'>3</div>
           <div class='Card'>4</div>
           <div class='Card'>5</div>
           <div class='Card'>6</div>
           <div class='Card'>1</div>
           <div class='Card'>2</div>
           <div class='Card'>3</div>
           <div class='Card'>4</div>
           <div class='Card'>5</div>
           <div class='Card'>6</div>
           <div class='Card'>1</div>
           <div class='Card'>2</div>
           <div class='Card'>3</div>
           <div class='Card'>4</div>
           <div class='Card'>5</div>
           <div class='Card'>6</div>
           <div class='Card'>1</div>
           <div class='Card'>2</div>
           <div class='Card'>3</div>
           <div class='Card'>4</div>
           <div class='Card'>5</div>
           <div class='Card'>6</div>
        </div>
    </body>
</html>

Note that I have to set the height to 100% of the parents width. Not the viewport's width.

score 0 · Accepted Answer · answered May 07 '19 at 04:03

referring to this https://codepen.io/ItScofield/pen/PNVZoQ

<div class='content'>Aspect ratio of 1:1</div> 
</div>

.box {
  position: relative;
  width: 20%;
  /* desired width */
  margin: 5px;

 }

.box:before {
  content: "";
  display: block;
  padding-top: 100%;
  /* initial ratio of 1:1*/
}

Css: how do you set height to 100% of the parents width

1 Answers1