How can I implement something like height: max(100%, fit-content)? I thought this would work as is, but the developer tools of Safari tell me that using fit-content inside max() is invalid. So, what is the best way to achieve the same effect?
CodePudding user response：
I have edited my answer with both options for scrollbar and overflow. Thanks 'NoobishPro' for pointing out my mistake.
<body>
<div style="height: 200px; width: 250px; background-color: blueviolet; ">
<div style="height: 100%; width: 180px; background-color: rgb(43, 226, 128); overflow:scroll; ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed arcu nisl, ultricies ac gravida eu, viverra a mauris. Nam gravida justo dolor, sit amet vestibulum tellus egestas a. In condimentum, turpis at interdum ultricies, sapien mauris luctus magna, auctor mattis enim felis eu leo. Mauris mattis ornare condimentum. Morbi viverra diam vitae ex elementum scelerisque. Nulla facilisi. Sed ac ipsum elementum, bibendum ex at, venenatis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Duis hendrerit dolor sed luctus cursus. Nam libero lorem, egestas ac nisi vitae, scelerisque ornare nulla. Vestibulum fermentum congue sem, in dignissim dui luctus a. Nam cursus enim id viverra blandit. In hac habitasse platea dictumst. Morbi sagittis leo elit, a porta felis facilisis in. In eu nunc lectus.
Aliquam et metus sed leo tincidunt ultrices at id eros. Donec non semper odio, ac suscipit nunc. Aliquam vitae pellentesque tortor, sed viverra ipsum. Donec tempus urna id nulla facilisis maximus. Donec volutpat leo at orci lacinia, nec rutrum purus tempor. Maecenas luctus elit eget lacus condimentum tempus. Curabitur porttitor elit nec ligula sagittis, in sodales odio vestibulum.
</div>
</div>
</body><body>
<div style="height: 200px; width: 300px; background-color: blueviolet; ">
<div style="min-height: 100%; width: 280px; background-color: rgb(43, 226, 128); ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed arcu nisl, ultricies ac gravida eu, viverra a mauris. Nam gravida justo dolor, sit amet vestibulum tellus egestas a. In condimentum, turpis at interdum ultricies, sapien mauris luctus magna, auctor mattis enim felis eu leo. Mauris mattis ornare condimentum. Morbi viverra diam vitae ex elementum scelerisque. Nulla facilisi. Sed ac ipsum elementum, bibendum ex at, venenatis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Duis hendrerit dolor sed luctus cursus.
</div>
</div>
</body>CodePudding user response：
Your question is in bad form. You show no examples of code or what it is you want exactly. You should try to be more clear in your questions.
I'll try to answer anyway.
The comment of min-height seems to be pretty close to what you want, and that makes sense. It's unclear to me whether you want the parent to grow or you want a scrollbar to pop up, so I've made both. You have not made it clear what type of content it is you want to show, so I'm assuming it's HTML content and not an image.
The reason height:100% doesn't work out of itself, is because the parent needs to be a relative container, so the will be able to grow 'relative' to said container.
I have made 3 containers, one which grows, one which adds a scroll and one which is static but shows an image.
HTML
<div >
<div >
// Content
</div>
</div>
<div >
<div >
//content
</div>
</div>
<!-- Object fit options: fill, contain, cover, none, scale-down -->
<div >
<img src="https://www.w3schools.com/css/paris.jpg" object-fit="cover " />
</div>
CSS:
.flexWrap {
display: flex;
flex-direction: row;
}
.parent {
width: 250px;
position: relative;
width: calc(50% - 5px);
height: 100%;
border-left: 5px solid grey;
}
.scroll {
height: 300px;
overflow: auto;
}
.grow {
min-height: 300px;
}
.image {
height: 300px;
overflow: hidden;
}
.child {
min-height: 100%;
}
</div>
Note that the relative position is a tricky thing. You will always need some parent to have a static height, then make every child down the tree have position:relative and a height settings to make it work.
If you make said child height:80%, and the next child height:100%, the next child's 100% will be the 80% from its parent, relative to whatever parent has the given height. This will never get calculated automatically unless you've done height:100% all the way from the HTML and Body elements down to wherever you are now.