Eu preciso manter olargura de um elemento como uma porcentagem de suaaltura. Assim, conforme a altura muda, a largura é atualizada.

O oposto é possível usando um valor de% para o topo do preenchimento, mas o preenchimento à esquerda como porcentagem será uma porcentagem da largura de um objeto, não da sua altura.

Então, com marcação como esta:

<div class="box">
  <div class="inner"></div>
</div>

Eu gostaria de usar algo como isto:

.box {
    position: absolute;
    margin-top: 50%;
    bottom: 0;
}
.inner {
    padding-left: 200%;
}

Para garantir que as caixasproporção é mantida de acordo com sua altura. A altura é fluida por causa de sua margem percentual - à medida que a altura da janela muda, a altura da caixa também muda.

Eu sei como conseguir isso com JavaScript, me perguntando se existe uma solução limpa apenas de CSS?