动态表格行数过多导致calculation_grid高度异常的解决方案咨询

Let's tackle this issue—you're right to avoid static max-height values, since they don't adapt well to different screen sizes or layout changes. Here's how to make your table fill the calculation_grid container dynamically, without fixed pixel values:

Root Cause #

Your calculation_grid has a fixed height via its parent grid's height:75%, but the .responsive-table inside it uses height:auto and a static max-height:750px. This disconnect means the table doesn't respect the parent container's bounds when rows grow.

Solution Steps #

1. Ensure calculation_grid establishes a proper height context – it's already a grid item with height:100%, but we can tweak its display to make sure child elements inherit this height correctly.
2. Make the table fill the parent container – set the table's height to 100% and use max-height:100% instead of a fixed value, so it adapts to the parent's available space.
3. Keep scroll functionality intact – retain overflow-y: auto so excess rows trigger scrolling instead of expanding the container.

Modified CSS Code #

Here's the adjusted CSS for the relevant sections:

.calculation_grid {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
  border: 3px solid rgba(255, 254, 5, 0.4);
  border-radius: 10px;
  color: rgba(255, 254, 5, 0.4);
  column-gap: 10px;
  display: flex; /* Changed from grid to flex to better control child height */
  flex-direction: column; /* Stack content vertically */
  grid-column-start: 2;
  grid-column-end: 7;
  grid-row-start: 1;
  grid-row-end: 3;
  height: 100%;
  width: 100%;
  padding: 5px;
}

/**************/
/* DATA TABLE */
/**************/
ul {
  padding: 0;
  margin: 0; /* Remove default margin to avoid extra space */
}
.responsive-table {
  overflow-y: auto; /* Keep vertical scroll */
  width: 100%;
  height: 100%; /* Fill parent's height */
  max-height: 100%; /* Use parent's height as max boundary */
}

Explanation #

• Changing calculation_grid to display: flex with flex-direction: column ensures the table inside takes up all available vertical space, rather than relying on grid's default alignment which might not enforce strict height constraints.
• Setting .responsive-table to height:100% and max-height:100% ties its size directly to the calculation_grid container, which gets its height from the parent calculation-grid-container (set to 75% of the section's height).
• Removing the static max-height:750px lets the layout adapt to any screen size, while overflow-y:auto handles excess rows with a scrollbar instead of expanding the container.

This setup will keep your calculation_grid height fixed relative to its parent, while the table inside scrolls when content exceeds the available space—no fixed pixel values required.

内容的提问来源于stack exchange，提问作者Ben