I’m trying to get a modal (flex Div) that can grow or shrink based on the content to lose its border radius when it hits the full height of the screen (in mobile view).

I tried using calc in a custom class in tailwind (combined with ReactJS & Typescript, not sure if its related). It works perfectly if I was using width – based on a post I found here: https://ishadeed.com/article/conditional-border-radius/

.modal-rounded {
    border-radius: max(
      0px,
      min(8px, calc((100vw - 100%) * 9999))
    );
  }

i.e. if the width is full screen, use 0px, if not 8px.

But when switching from vw to vh:

.modal-rounded {
    border-radius: max(
      0px,
      min(8px, calc((100vh - 100%) * 9999))
    );
  }

the behaviour seems to get confused, and I get the 8px border radius when I shrink it to a smaller size instead. I’m not sure if I’m missing something in the formula, or misunderstanding how calc works.

Help would be appreciated. Thank you.