css size portrait,html - Resize sensor - Proportional div sizing in CSS - Stack Overflow

I have a flexbox layout with three horizontal columns which I want to fill the full size of the window with no scrollbars.

In the center column sits a div which will show a A4 page. The dimentions need to be always be proportional and if the browser is resized the div needs to resize accordingly on the fly.

The contents of the div will also also need to be scaled. The div will contain a number of elements including text and images which need to be scaled down to match the parent page container.

My first attempt I tried;

A4-Portrait {width: auto; height: auto;max-width: 595.296px;max-height:

841.896px;}

But of course this dosent resize proportionaly nor scale down the DIV only resize the height and width to accomadate the containing space.

I have coded a simple sample to illustrate the problem.

body

{

padding: 0em;

margin: 0em;

height: 100vh;

display: flex;

flex-direction: column;

font-family: arial;

box-sizing: border-box;

}

header, main, footer

{

padding: 1em;flex: 1;

}

header, footer

{

background-color: #999;

}

main

{

flex: 2;

background-color: grey;

}

page

{

padding: 1em;

background: white;

display: block;

}

.A4-Portrait

{

width: 595.296px;

height: 841.896px;

}

[header]

[page]

[footer]

UPDATE: I was not able to find a pure CSS solution so I ended up using 'Fit.js'

Including the JS file I just had to add the following code to implement. The A4 page size in px was intact and the JS worked out the max dimentions back from the parent DIV. This also watched user resizing of the browser.

// get element references

var foo = document.querySelector('main');

var bar = document.querySelector('#pageSize');

// fit bar into foo

// the third options argument is optional, see the README for defaults

// https://github.com/soulwire/fit.js

var watching = fit(bar, foo, {

// Alignment

hAlign: fit.CENTER, // or fit.LEFT, fit.RIGHT

vAlign: fit.CENTER, // or fit.TOP, fit.BOTTOM

// Fit within the area or fill it all (true)

cover: false,

// Fit again automatically on window resize

watch: true,

// Apply computed transformations (true) or just

// return the transformation definition (false)

apply: true

});