How to keep scroll and height shrink for content of absolutely positioned element?

Question

There is absolutely positioned element .data with some content.

* {
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box;
}
.container {
  position: relative;
  height: 100dvh;
  width: 100dvw;
  overflow: hidden;  
}
.data {
  position: absolute;
  display: flex;
  flex-direction: column; 
  border: solid 2px red;
  max-width: 10em;
/*   inset: 0.7em 0.7em 0.7em 0.7em; */
  inset: 0.7em 0.7em auto 0.7em;
}
.data ul {
  display: flex; 
  flex-direction: column;
  overflow-y: auto;
  list-style: none;
}
.data button {
  align-self: flex-end;
}

<div class="container">
  <div class="data">
    <button>&#x2715;</button>
    <ul>
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>      
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat tincidunt lorem, at gravida tellus consectetur in. Aliquam ac mi mauris. Sed imperdiet convallis velit non egestas. Nunc tempor porta nisl, vel vestibulum sem blandit eget. Mauris pharetra tincidunt felis, in imperdiet nunc malesuada nec. Duis placerat id felis maximus euismod. Nam convallis tellus ut tortor gravida, sed venenatis lorem egestas.</li>
      <li>In ac dolor a nibh ultricies vulputate. Curabitur mattis dignissim eros, eu lacinia est convallis in. Mauris et suscipit purus. Nulla facilisi. Morbi fermentum magna ut sodales pharetra. Sed feugiat, urna sed faucibus cursus, diam ligula faucibus arcu, ut tincidunt eros orci quis orci.</li> 
      <ul>
  </div>
</div

With inset: 0.7em 0.7em auto 0.7em; of .data style its height is shrank according to small content, but scroll is disappears for large content, i.e it is looks like overflow: hidden;

With inset: 0.7em 0.7em 0.7em 0.7em; of .data style its height is stretched for large content and scroll is appears, but the height does not shrink in case of small content.

How to keep overflow: auto; for large content and height shrink for small one at the same time?

Answer 1

add max-height: calc(100% - 1.4em); to data class.