Get max-content value without using JS
is there any way to get what value is in place where the max-content is being used and use it dynamically ?
i need to use the maxHeight's value here in the top's position
15 Replies
what are you trying to do?
i have made such that the column headers text can wrap
and since it can wrap i sometimes goes out of the container
so i added the maxHeight to max-content which was 56px hardcoaded
now when the height increase it overlaps on the table rows
Why do you need to set a max height on the element? If the text can wrap then just leave it as is…no need to hard-code anything and it'll Jus Work™ because HTML is awesome.
Also, if you're using
!important then something is very wrong with your styles.i agree with everything he said
if you're worried about it pushing stuff, then you can just use a transform to move it -100%
it's a bad idea, but it's better than shoehorning a max-height for no reason
In my experience, most people put a max height because they think they need it when HTML/CSS does the magic for you. Just enjoy the web!
and i have to agree
you are 100% right
(one tiny sidenote that sometimes
!important can be necessary if you're modifying something someone else made, where you don't have reasonable access to be able to modify the source of a main stylesheet. Like when you're using a component library such as MUI. But you should still strive to avoid it)
it's a last resort, but sometimes you're forced to itFine, be logical and stuff. See if I care ! 😭
also: to answer your question, or rather solve the problem you're actually having, make a minimum reproduction in codepen so folks can play with it
you're also correct, but that doesn't mean the original thingy didn't do something wrong
that's arguable, considering the framework might not be made with modification in mind, or at least not this particular modification. But that discussion is off topic for the post
good point
oh, and to answer the "face-value" question: you can't
the "get max-content value without js"
you can inherit the value, but the value with be
max-content and not the calculated value
only js has access to the calculated valueyeah i had to do it via JS
sad
how do i close this now
just add the "solved" tag: should be the first one
I just added the "Solved" tag for you