Allow scroller width to fit contents

[pjc2007]

I am using the virtual scroller in sidebar in an Ionic/Angular project, where I would like the scroller's width to adjust to that of the contents

I have something similar to...

CSS:

#container {
  display: grid;
  grid-template-columns: min-content 1fr;
}

#side-bar {
  height: 100%;  
  overflow-y: hidden;
  display: grid;  
  grid-template-rows: min-content 1fr;
}

HTML:
<div id="container">
    <div id="side-bar">
      <div class="label bold">{{resourceKeys.labelObservations | translate}}</div>  
      <virtual-scroller #scroll [items]="mydates">
        <ion-item detail="false" button="true" *ngFor="let date of scroll.viewPortItems" 
            <div class="date">{{date | date:dateTimeFormat}}</div>            
        </ion-item>
      </virtual-scroller>  
    </div>
</div>

 <div id="main">.... </div>

So the sidebar has a div, and the scroller.

And the main content has grid-template-columns: min-content 1fr; where the min-content tells the side bar to take up what room it needs.

However, the scroller does not seem to adjust its width at all, the width of the sidebar is dictated by the div about the scroller.

If I set the css

virtual-scroller {
    width: fit-content
}

it actually shrinks to zero width.

Is there a way to have the scroller fit to the width of the contents (or just take a guess - all my contents will have similar width)?

[pjc2007]

Actually, after trying some other elements, (e.g. ion-list) these did not work either. so likely this is not specific to this component. so I will close this issue