Set min-height equal to width

Question

I have a fluid width div which is within another block-level element.

HTML

<div></div>

CSS

div {
    width:50%;
    min-height: /*equal to width */;
}

I want the min-height set equal to the width so that it is a square shape unless there is too much content. At that point, it should expand vertically. Can this be achieved with CSS?

What I've tried:

• Using percentage paddings or margins, but this only sets height, not max--height and pushes the content down.

Answer 1

Because padding is relative to an elements width, you can use a pseudo element to force a min height by using padding-top: 100%;:

div {
  float: left;
  margin: 10px;
  width: 25%;
  background: lightGreen;
  position: relative;
}

div:before {
  content: "";
  display: block;
  padding-top: 100%;
  float: left;
}

<div></div>

<div>
  div with content. div with content. div with content. div with content. div with content. div with content. div with content. div with content. div with content. div with content. div with content. div with content. div with content. div with content.
  div with content. div with content. div with content. div with content. div with content. div with content.
</div>

<div>
  div with content. div with content.
</div>

Answer 2

One option would be to use viewport percentage units. In this case, 50vw is 50% of the viewport. If the div is a root element and its width is relative to the viewport, then this work work as expected. You would otherwise have to calculate the height relative to the viewport for this to work.

For example:

div {
  width: 50vw;
  min-height: 50vw;
  background: #000;
}

<div></div>