I am attempting to adjust the height of a div based on the size of the screen. Within this div, there is a calendar that contains multiple lines of content, which can be displayed or hidden based on user preference. The height of the calendar is not fixed, so I have set the div's height to auto. This approach works well as the height adjusts according to the number of lines in the calendar.
The issue arises when the browser window is resized to be smaller than the required height of the calendar. A scroll bar appears, but the positioning of the scroll becomes problematic. It covers the entire div rather than just the calendar within it. While removing the fixed height property eliminates the scroll position issue, the overall height of the div remains constant regardless of content present. I am seeking a solution where the div will expand dynamically if space allows and match its parent's height otherwise - however, CSS does not support setting a minimum height to 'auto'.
I suspect that one possible solution could involve checking if the div has enough space using auto, and if not, defaulting to the height of its parent container. Unfortunately, utilizing the min property poses some challenges since it does not accept parameters like 'auto'. I am unsure how best to implement this logic solely through CSS.
[EDIT: Additional Details]
HTML:
<html>
<body>
<div class = "calendar">
<div class = "content">
<\div>
<\div>
</body>
</html>
CSS:
body {height: 100vh; overflow: hidden;}
.calendar {overflow-y: auto;}
.content {height: auto;} \\The current issue
In the JavaScript code, the height of the calendar is referenced as "parent".