Is there any way by which one can actually calculate how much will be max-content or min-content or fit-content and so on.

Something like

.btn:hover {
    width: calc(max-content);
}

I tried (max-content 0px) but it didn't worked either. Need a pure CSS solution. Use of JavaScript should be last priority!

CodePudding user response：

Are you trying to achieve something like this?

.wrapper {
  display: flex;
  justify-content: center;
}
.hover-me {
  flex-grow: 0;
  cursor: pointer;
  transition: flex-grow 1s cubic-bezier(.5,0,.3,1);
}
.hover-me:hover {
  flex-grow: 1;
}

<div >
  <button >hover me</button>
</div>

CodePudding user response：

.btn:hover{
    width: 100%;/* for maximum space available to the button in parent element */
}

or

.btn:hover{
    width: 100%;/* for maximum space available to the button in window */
}