Is there a way to make width as height?-CodePudding

I have styles like this and I want to make width of div same as height, how can I implement It

<main>
<span>1234567890</span>
<div></div>
</main>
<style>
main{
  position: relative;
  height: fit-content;
  display: flex;
}
div{
  background: green;
  height: 100%;
  aspect-ratio: 1;
}</style>

Currently example is not working and width is 0

CodePudding user response：

You can try with CSS grid but the green rectangle will overflow the container:

main {
  display: inline-grid;
  grid-template-columns: 1fr auto;
}

div {
  background: green;
  aspect-ratio: 1;
  height: 100%;
}

<main>
  <span>1234567890</span>
  <div></div>
</main>

CodePudding user response：

You can use 1em as width & height for your div if you know your text is only 1 line:

<main>
  <span>1234567890</span>
  <div></div>
</main>

<style>
  main{
    position: relative;
    height: fit-content;
    display: flex;
  }

  div {
    background: green;
    height: 1em;
    width: 1em;
  }
</style>