CODEWITHSUNDEEP
htmlcss
Trevald
Trevald

Reputation: 117

Make child width equal to parent height with CSS only

enter image description here

As described by the image there are two elements: A parent (dark gray) and child (not so dark gray). The width and height of the parent is fluid. The ratio of the child i 1:1 or y:y where y is equal to the height of the parent.

I've tried to find ways to solve this using flex, calc, padding etc but have reached the end of the road. Any ideas how to solve this with pure CSS are much appreciated.

EDIT: I realize now I should have added more details regarding the usage of this scenario. As well as what I consider to be a dynamic height. Dynamic height for me suggests that the height is decided by the amount of content it contains. So I added some HTML to clarify. The .content div may be unnecessary if you can put the content directly in the .container div. But that depends on how you write the CSS:

<div class="container">
  <div class="content">
    Here is some text. It can be long and it can be short. 
    It will affect the height of the .container thus also 
    the height and width of the .square.
  </div>
  <div class="square">1:1</div>
</div>

Upvotes: 8

Views: 12449

Answers (3)

Wazi Armstrong
Wazi Armstrong

Reputation: 33

This question was quite old. But today I found a quite-tricky solution that may help. That is, I utilize the property of image (svg here) that preserve the aspect ratio while scaling. So I insert an empty svg and make its height fit the parent. Then we have its width equals to its height. (You can change the 1 1 in the part <svg viewBox="0 0 1 1" > to change the ratio). See the example below. Sorry for my bad English.

.outer {
  display: flex;
  
  /* This is just for the example */
  width: 500px; /* x */
  height: 100px; /* y */
  font-size: 18px;
  font-family: Verdana, Geneva, sans-serif;
}

.left {
  flex-grow: 1;
  
  /* This is just for the example */
  color: #cddfc9;
  background-color: #636363;
  padding: 10px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.child {
  height: 100%;
  position: relative;
  display: inline-flex;
}

/* This is the trick */
.child svg {
  height: 100%;
  width: 100%;
}

.child > .content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  
  /* This is just for the example */
  color: white;
  background-color: #8a8a8a;
  display: flex;
  align-items: center;
  justify-content: center;
}
<div class="outer">
  <div class="left">
   Text of various length be here...
  </div>
  <div class="child">
    <svg viewBox="0 0 1 1" ></svg>
    <div class="content">
      yxy
    </div>
  </div>
</div>

Upvotes: 1

FutureCake
FutureCake

Reputation: 2943

you can use the vh property for this. Set the height of your parent div in vh and then use the same vh value for the width of your child div and set the height of the child div to 100%.

#parent{
    position: absolute;
    left: 0;
    top:0;
    width: 400px;
    height: 50vh;
    background-color: red;
}

#child{
    position: relative;
    float: right;
    height: 100%;
    width: 50vh;
    background-color: blue;
}
<div id="parent">
   <div id="child"></div>
</div>

Upvotes: 0

Martin P.
Martin P.

Reputation: 292

I think it is not possible to do what you try!You can't get parents height without JS. But maybe there is another solution. Does your parent container also has a fixed proportion?

Upvotes: 1

Related Questions