adobe/react-spectrum

ResizableTableContainer: Column resize to infinite width when wrapped with display: flex

Open

#5.412 geöffnet am 13. Nov. 2023

Auf GitHub ansehen
 (6 Kommentare) (1 Reaktion) (0 zugewiesene Personen)TypeScript (1.500 Forks)auto 404
bughas workaroundhelp wanted

Repository-Metriken

Stars
 (15.634 Stars)
PR-Merge-Metriken
 (PR-Metriken ausstehend)

Beschreibung

Provide a general summary of the issue here

When rendering a ResizableTableContainer which for parent has an element with style display: flex, the columns are expanding in size infinitely if they're not bounded (not using maxWidth).

🤔 Expected Behavior?

Columns most likely should not have this behavior

😯 Current Behavior

Columns are expanding in width infinitely

💁 Possible Solution

workaround: use div with display: block

🔦 Context

Obviously I don't think this is a blocker, but it's something I got surprised by when trying to use ResizableTableContainer.

🖥️ Steps to Reproduce

https://codesandbox.io/s/interesting-curran-lsx537?file=/src/App.js

Version

1.0.0-rc.0

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

If other, please specify.

No response

What operating system are you using?

MacOS Sonoma

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

Contributor Guide

Research-Richtung
Untersuche, wie der ResizableTableContainer mit Flex Containern interagiert. Überprüfe das CSS und die Komponentenlogik, um sicherzustellen, dass Spalten sich nicht unendlich ausdehnen, wenn das Elternteil display: flex hat. Erwäge das Hinzufügen von min width oder overflow Eigenschaften.
Tech Stack
typescriptreact
Domain
frontend
Issue Type
Fehler
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
3
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
1-3 Stunden
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
Aktiv
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
Klar
Voraussetzungen
ReactCSS flexbox
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
60