Css: limit element to min (container width, container height)

Question

Given the following:

<div class="container"> <div class="content"> </div> </div> 

Is there a way for CSS to dynamically set the content element both in height and in width to a smaller value of two (height or width) container ?

For example, if container is 460x320 , then content should be 320x320 . If container is 240x333 , then content should be 240x240 .
The container size is not known in advance, so using fixed values ​​will not work.
I tried everything from max-height/max-width to object-fit , but couldn't get it working.

Check jsfiddle for demonstration (using javascript)

This is pretty easy to do with JavaScript, but I'm looking for a CSS trick, if possible.

Answer 1

• What you are asking is not possible with CSS. CSS is a declarative language
• Thus, there is no way to get the size of an element, compare its height and width, and set it to another element.

Answer 2

Mark the snippet. This is a CSS3 @media query solution.

 .container{ width: 240px; margin-left: auto; margin-right: auto; height: 333px; position: relative; background-color: rgba(0, 0, 0, 0.70); border-radius: 3px; } @media (min-width: 768px){ .container{ width: 460px; height: 320px; } } .content{ position: absolute; left: 0; width: 100%; top: -webkit-calc(50% - ((100% - 93px) / 2)); top: -moz-calc(50% - ((100% - 93px) / 2)); top: calc(50% - ((100% - 93px) / 2)); height: -webkit-calc(100% - (333px - 240px)); height: -moz-calc(100% - (333px - 240px)); height: calc(100% - (333px - 240px)); background-color: green; } @media (min-width: 768px){ .content{ top: 0; height: 100%; width: -webkit-calc(100% - (100% - 320px)); width: -moz-calc(100% - (100% - 320px)); width: calc(100% - (100% - 320px)); left: -webkit-calc(50% - ((100% - (100% - 320px)) / 2)); left: -moz-calc(50% - ((100% - (100% - 320px)) / 2)); left: calc(50% - ((100% - (100% - 320px)) / 2)); } } 

 <div class="container"> <div class="content">I'm Absolute</div> </div> 

Edit

I understand what you want. Only CSS3 @media query works on a piece of work . You must indicate each time how many width and height elements you want to give the child element using JavaScript . If your child an absolute position element, you need to set the left , right , top and bottom position of the script . You cannot set width and height with CSS if you accidentally change the parent height and width fields.

There is only one way to set the height and width on CSS you if you want to reduce a certain amount (i.e. 50px amount) all the time from the total width and total height when changing the parent width and height randomly.

Check this snippet.

 const container = document.querySelector(".container"); const content = document.querySelector(".content"); const min = 300, max = 600; function resize() { const width = Math.floor(Math.random() * (max - min + 1)) + min; const height = Math.floor(Math.random() * (max - min + 1)) + min; container.style.width = width + "px"; container.style.height = height + "px"; } const button = document.querySelector("button"); button.addEventListener("click", resize); resize(); 

 .container{ width: 460px; margin-left: auto; margin-right: auto; height: 320px; position: relative; background-color: rgba(0, 0, 0, 0.70); border-radius: 3px; } .content{ position: absolute; left: calc(50% - ((100% - 50px) / 2)); width: calc(100% - 50px); top: -webkit-calc(50% - ((100% - 50px) / 2)); top: -moz-calc(50% - ((100% - 50px) / 2)); top: calc(50% - ((100% - 50px) / 2)); height: -webkit-calc(100% - 50px); height: -moz-calc(100% - 50px); height: calc(100% - 50px); background-color: green; } 

 <div class="container"> <div class="content">I'm Absolute</div> </div> <button>resize</button> 

If this work then it will be good. Otherwise, the way to change is to CSS only.

Thanks.