Can't get scroll bars to show properly

[ghost]

Description

QMD Code:
---
title: "Template"
author: "My Name"
date: today
format:
  html:
    page-layout: full  
    toc: true
    toc-depth: 3
    number-sections: false
    theme: cosmo
    toc-location: left
    css: style.css
---
<summary><strong>Section 1</strong></summary>

## Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div class="scroll-wrapper">
```{r}
wide_df <- as.data.frame(matrix(runif(50 * 50), nrow = 50))
colnames(wide_df) <- paste0("Var", 1:50)
knitr::kable(head(wide_df,20), format = "html", table.attr = 'class="scroll-table"')

```

When I use the following CSS with the aboe QMD, I can't get the scroll bars to work when the wide_df is shown in the output.

The vertical scroll bar is there appropriately.

However, the horizontal scroll bar is not ther eunless I move down to the final row in the table at which time it appears. I want it to automatically appear along with the vertical scroll bar,

CSS Script
/* Heading styles */
main.content h1,
main.content .h1,
main.content h2,
main.content .h2,
main.content h3,
main.content .h3,
main.content h4,
main.content .h4,
main.content h5,
main.content .h5,
main.content h6,
main.content .h6 {
  background: #182A54;
  border: 2px solid white;
  color: white;
  padding: 4px 8px;
  margin-top: 0.5em;
  margin-bottom: 0.3em;
  font-size: 1.1em;
}

/* Title metadata layout */
.quarto-title-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.quarto-date {
  margin-left: auto;
  text-align: right;
}

/* Scroll wrapper for both vertical and horizontal scroll */
.scroll-wrapper {
  max-height: 400px;
  overflow: auto; /* Enables both horizontal and vertical scrollbars */
  margin: 0 auto;
  width: 100%;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
}

/* Table styling */
.scroll-table {
  border-collapse: collapse;
  width: max-content; /* Allows horizontal expansion */
  min-width: 100%;     /* Prevents shrinking too small */
  table-layout: auto;
  margin: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Zebra striping */
.scroll-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.scroll-table tr:nth-child(odd) {
  background-color: #ffffff;
}

/* Header and cell styling */
.scroll-table th,
.scroll-table td {
  padding: 10px 16px;
  min-width: 120px;
  border: 1px solid #000;
  text-align: left;
}

/* Sticky header */
.scroll-table th {
  background-color: #CBDFF1;
  color: #000;
  font-weight: normal;
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Remove sticky first column and gray background */
.scroll-table th:first-child,
.scroll-table td:first-child {
  position: static;
  background-color: inherit;
  z-index: auto;
}

THANK YOU!!!!!

[mcanouil]

Could you properly format your post using code blocks for code and terminal outputs? Thanks.
If your code contains code blocks, you need to enclose it using more backticks, i.e., usually four ````.
See https://quarto.org/bug-reports.html#formatting-make-githubs-markdown-work-for-us.

Please also remove all unnecessary styling and options.

Note also that to this level of HTML/CSS customisation, there are no workarounds other than having to learn how it works using online resources.
One tool to use is your favourite browser which as an "inspect" /developer tool to investigate your page and to live edition to figure out the issue.
(AIs won't help you if you don't understand how HTML/CSS works)

Finally, please read the basics markdown guide, especially the part about using raw content.

[ghost]

Thank you - I am new to posting here so probably making fundamental mistakes. Thanks for letting me know the proper way to post using four ‘ marks. I’ll update once I am back to my computer.