adobe/react-spectrum

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

Open

#5 412 ouverte le 13 nov. 2023

Voir sur GitHub
 (6 commentaires) (1 réaction) (0 assignés)TypeScript (1 500 forks)auto 404
bughas workaroundhelp wanted

Métriques du dépôt

Stars
 (15 634 stars)
Métriques de merge PR
 (Métriques PR en attente)

Description

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

Guide contributeur

Direction de recherche
Étudiez comment ResizableTableContainer interagit avec les conteneurs flex. Examinez le CSS et la logique du composant pour garantir que les colonnes ne s'étendent pas à l'infini lorsque le parent a display: flex. Envisagez d'ajouter des propriétés min width ou overflow.
Stack technique
typescriptreact
Domaine
frontend
Type d'issue
Bug
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
3
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
1-3 heures
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
Active
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
Claire
Prérequis
ReactCSS flexbox
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
60