Setting the width depending on the height of its parent

Question

The global problem:

I want to set the width of an element depending on the parent's height, I know that you can use padding-top to set the height depending on the parent's width, maybe someone knows a trick for my case.

A possible solution(trick) to The global problem would be setting height: 100% to the element and then rotate(90deg) that would simulate that it has the width equal to the parent's height but that don't fit my case.

The specific problem ( Maybe it's possible to do some workaround):

Simplified problem:

I want a dynamic square element that has width and height = x where x = parent's height.

---

Full problem:

I want something like this

where x = d / sqrt(2) (Pythagorean theorem)

so as you can see "d" is the parent's height, I try with

.blue{
    background: #1AA9C8;
    width: 200px;
    height: 100px;
    position: relative;
    margin: 25px auto;
}

.blue:before{
    content: '';
    position: absolute;
    right: calc(100% - 36px);
    top: 15px;
    background: firebrick;    
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    height: calc(100% / 1.41);/*this worked because height depends on the parent's height (div.blue)*/
    width: 70.9px; /* calc(100% / 1.41) here is my problem  because width depends on the parent's width and I don't know how to make it depends on the parent's height
}

<div class="blue"></div>

Note that I set a fixed width because I don't know how to make it depends on the height of div.blue

Here a jsfiddle example to do some workaround.

I would be grateful if someone could help me.

ONLY CSS

Answer 1

Addressing your specific, yet not full, problem:

I want a dynamic square element that has width and height = x where x = parent's height.

The dynamic square can be an image, and the parent a div.

<div class="parent-container">
    <img class="image" src="{{imageUrl}}" />
</div>

Now for this setup you give the parent a desired height and tell the element (image) to take it all. Like this:

.parent-container {
    height: 400px;   
}

.image {
    height: 100%;
}

This way, the width is not of your concern.

---

Edit

Modifying the CSS to this:

.parent-container {
    height: 400px;
    overflow: hidden;
}

.image {
    height: 70.92%;
    position: relative;
    transform: translate(-50%, 0)rotate(-45deg);
    top: 14.4%;
}

Should address the "Full Problem".

Please, mind that the height and top values are rough calculations and should be re-carried out.

The fiddle to boot: https://jsfiddle.net/0pok1bf0/

Answer 2

Just for kicks and giggles, here is an interesting attempt that makes use of vertical percentages (padding), as explained here: http://www.impressivewebs.com/vertical-percentages-css/

.d1 {
	margin-left: 50px;
	width: 50%;
	background-color: #CCCCFF;
	border: solid black 1px;
}

.d2 {
	width: 25%;
	background-color: #FF6666;
	border: solid black 1px;
	padding-top: 25%;
	margin: 5%;
	margin-left: -13%;
	transform: rotateZ(45deg);
}

<div class="d1">
	<div class="d2"></div>
</div>

View full page mode and resize... everything scales nicely, almost :P