Fix issue with auto-expanding flex tabs

Author: KoolADE85

CHANGELOG.md

@@ -2,6 +2,14 @@
 All notable changes to `dash` will be documented in this file.
 This project adheres to [Semantic Versioning](https://semver.org/).
 
+## UNRELEASED
+
+## Added
+- Modernized `dcc.Tabs`
+
+## Changed
+- `dcc.Tab` now accepts a `width` prop which can be a pixel or percentage width for an individual tab.
+
 ## [4.0.0rc2] - 2025-10-10
 
 ## Added

components/dash-core-components/src/components/Tabs.tsx

@@ -54,7 +54,7 @@ const EnhancedTab = ({
         labelDisplay = (
             <ExternalWrapper
                 component={label}
-                componentPath={[...componentPath, 0]}
+                componentPath={[...componentPath, 'props', 'label']}
             />
         );
     } else {
@@ -190,10 +190,10 @@ function Tabs({
             const style = childProps.style ?? {};
             if (typeof childProps.width === 'number') {
                 style.width = `${childProps.width}px`;
-                style.flex = 'none';
+                style.flex = '0 0 auto';
             } else if (typeof childProps.width === 'string') {
                 style.width = childProps.width;
-                style.flex = 'none';
+                style.flex = '0 0 auto';
             }
 
             return (

components/dash-core-components/src/components/css/tabs.css

@@ -2,6 +2,7 @@
 .tab-parent {
     display: flex;
     flex-direction: column;
+    overflow: hidden;
 }
 
 /* Tab container (holds all tabs) */
@@ -16,13 +17,13 @@
 
 /* Individual tab */
 .tab {
-    flex: 1;
+    flex: 1 1 0;
+    min-width: 0;
     background-color: var(--tabs-background);
     border: 1px solid var(--tabs-border);
     border-bottom: none;
     padding: 20px 25px;
     transition: background-color, color 200ms;
-    width: 100%;
     text-align: center;
     box-sizing: border-box;
 }