Div That Fits Into Parent And Maintains An Aspect Ratio

I've got a div element that maintains an aspect ratio: it calculates its height based on its width (using the padding trick). What I'd like to do is to put this div into another on

Solution 1:

The only workaround I managed to achieve so far is to wrap the child element in to svg's foraignObject tag:

const container = document.getElementById('container');
document.getElementById('btn').addEventListener('click', () => {
  container.style.height = container.style.height === '100px' ? '200px' : '100px';
});

body {
  margin: 1rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

button {
  margin-bottom: 1rem;
}


#container {
  background-color: #ffceaf;
  width: 400px;
}

svg {
  background-color: #b8d6ff;
  height: auto;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
}

#content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: solid;
}

<buttonid="btn">Change parent height</button><divid="container"style="height: 100px;"><svgwidth="15000"height="5000"><foreignObjectwidth="100%"height="100%"><divid="content">
        content content content content content content content
        content content content content content content content
        content content content content content content content
        content content content content content content content
        content content content content content content content
        content content content content content content content
        content content content content content content content
        content content content content content content content
        content content content content content content content
        content content content content content content content
        content content content content content content content
        content content content content content content content
        content content content content content content content
        content content content content content content content
        content content content content content content content
        content content content content content content content
        content content content content content content content
        content content content content content content content
        content content content content content content content
        content content content content content content content
        content content content content content content content
        content content content content content content content
      </div></foreignObject></svg></div>

This solution has downsides:

• Browser compatibility (IE/Edge do not support foraignObject properly)
• It's not a best practice. Including elements from a different XML namespace may cause futher issues(?).

I feel like using JS might be better option here.

Solution 2:

Ok, it looks like it can't be solved by CSS only. If anyone interested, I've put together a React component that does the job (Tests and better README soon, when I have time).

It wraps its children into a div and uses JavaScript to compute the width and height of that div in order to accommodate the available space while maintains the given aspect ratio. It basically stretches the wrapper until one of the sides reaches its maximum.

BREAKING UPDATE a CSS only solution has been found!

Solution 3:

aspect-ratio with overflow:hidden on Chromium 88, Firefox 87 , and Safari Technology Preview 118 is your friend.

html,
body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.container {
  display: grid;
  resize: both;
  overflow: hidden;
  border: black 2px solid;
  min-width: 50px;
  min-height: 50px;
}

.embed {
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  border: 2px red solid;
  box-sizing: border-box;
  display: flex;
  max-height: 100%;
  margin: auto;
}

.embed > div {
  margin: auto;
}

<divclass="container"><divclass="embed"><div>1:1</div></div></div>