@@ -123,6 +123,53 @@ const ColumnContainer = (props: ColumnContainerProps) => {
123123) ;
124124} ;
125125
126+ // Function to apply min-widths to grid template columns
127+ const applyMinWidthsToGridColumns = ( columnsDef :string , minWidths :( string | null ) [ ] = [ ] ) => {
128+ // Handle empty case
129+ if ( ! columnsDef ?. trim ( ) ) return '' ;
130+
131+ // Handle repeat() functions with special parsing
132+ if ( columnsDef . includes ( 'repeat(' ) ) {
133+ // For complex repeat patterns, we should return as-is to avoid breaking the layout
134+ // A more complex parser would be needed to fully support repeat with minmax
135+ return columnsDef ;
136+ }
137+
138+ const columns = columnsDef . trim ( ) . split ( / \s + / ) ;
139+
140+ const newColumns = columns . map ( ( col , index ) => {
141+ const minWidth = minWidths [ index ] ;
142+
143+ // Skip if no minWidth provided for this column
144+ if ( ! minWidth ) {
145+ return col ;
146+ }
147+
148+ // Keywords that should never be wrapped in minmax()
149+ const keywords = [ 'auto' , 'min-content' , 'max-content' , 'fit-content' , 'subgrid' ] ;
150+ if ( keywords . some ( keyword => col === keyword ) ) {
151+ return col ;
152+ }
153+
154+ // Functions that should never be wrapped in minmax()
155+ if ( col . includes ( '(' ) && col . includes ( ')' ) ) {
156+ // Already includes a function like calc(), minmax(), etc.
157+ return col ;
158+ }
159+
160+ // Determine if column is flexible and can be wrapped with minmax
161+ // - fr units (e.g., "1fr", "2.5fr")
162+ // - percentage values (e.g., "50%")
163+ // - length values (px, em, rem, etc.)
164+ const isFlexible = / f r $ / . test ( col ) ||
165+ / % $ / . test ( col ) ||
166+ / ^ \d + ( \. \d + ) ? ( p x | e m | r e m | v h | v w | v m i n | v m a x | c m | m m | i n | p t | p c ) $ / . test ( col ) ;
167+
168+ return isFlexible ?`minmax(${ minWidth } ${ col } :col ;
169+ } ) ;
170+
171+ return newColumns . join ( ' ' ) ;
172+ } ;
126173
127174const ColumnLayout = ( props :ColumnLayoutProps ) => {
128175let {
@@ -139,6 +186,12 @@ const ColumnLayout = (props: ColumnLayoutProps) => {
139186 mainScrollbar
140187} = props ;
141188
189+ // Extract minWidths from columns
190+ const minWidths = columns . map ( column => column . minWidth || null ) ;
191+
192+ // Apply min-widths to grid template columns
193+ const gridTemplateColumns = applyMinWidthsToGridColumns ( templateColumns , minWidths ) ;
194+
142195return (
143196< BackgroundColorContext . Provider value = { props . style . background } >
144197< DisabledContext . Provider value = { props . disabled } >
@@ -147,7 +200,7 @@ const ColumnLayout = (props: ColumnLayoutProps) => {
147200< ContainWrapper $style = { {
148201 ...props . style ,
149202display :"grid" ,
150- gridTemplateColumns :templateColumns ,
203+ gridTemplateColumns :gridTemplateColumns ,
151204 columnGap,
152205gridTemplateRows :templateRows ,
153206 rowGap,