Over and over again in various technologies, a key piece of functionality is to take any content and fit it into any other content. It isn't a trivial problem and a few years ago I ended up with a very verbose JS solution which I am not particularly happy with. 

I have simplified the problem into a handful of divs. The `inner` container contains a `top` and `bottom` container and now I want to fit that `inner` inside another `outer` container exactly keeping aspect ratio and centered.

Something like this.

[![demo](https://i.stack.imgur.com/AY6JY.png)](https://i.stack.imgur.com/AY6JY.png)

A basic template. One of the issues here is that I am not sure the responsibilities from a CSS perspective. I am visualising this similar to `object-fit: contain` the only difference is that I have a div container rather than an geometry object but seeking similar behaviour.

```css
html, body {
  width: 100%;
  height: 100%;
  margin: 0
}

.outer {
  width: 100%;
  height: 100%;
}

.inner {

}

.top {
  background-color: #0ff;
  width: 1000px;
  height: 1000px;
}

.bottom {
  background-color: #0f0;
  width: 1000px;
  height: 1000px;
}
```

```html
<div class=outer>
  <div class=inner>
    <div class=top>
    </div>
    <div class=bottom>
    </div>
  </div>
</div>
```

[Here is the same Fiddle](https://jsfiddle.net/yxho9n5a/7/) 

**Edit**: 

Just to make it clear that there should be no scroll bars. `inner` can be anything of any size. It might have 1000 youtube embeds, or a 2000x2000 canvas game. But if `outer` is 100px x 100px then all content "fits into" that space.

**Edit**

Basically I want `object-fit: contain`. When you have a `div` and and an `img` inside. `contain` will scale to fit that geometry to the parent container. It isn't cropped, or resized. However, I have a `content div` not a Image. So how does one recreate the same behaviour?