@@ -72,6 +72,7 @@ const ColWrapper = styled(Col)<{
7272$minWidth ?:string ,
7373$matchColumnsHeight :boolean ,
7474} > `
75+ min-width:${ ( props ) => props . $minWidth || 'auto' }
7576 > div {
7677 height:${ ( props ) => props . $matchColumnsHeight ?`calc(100% -${ props . $style ?. padding || 0 } ${ props . $style ?. padding || 0 } :'auto' }
7778 border-radius:${ ( props ) => props . $style ?. radius }
@@ -122,6 +123,53 @@ const ColumnContainer = (props: ColumnContainerProps) => {
122123) ;
123124} ;
124125
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+ } ;
125173
126174const ColumnLayout = ( props :ColumnLayoutProps ) => {
127175let {
@@ -138,6 +186,12 @@ const ColumnLayout = (props: ColumnLayoutProps) => {
138186 mainScrollbar
139187} = props ;
140188
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+
141195return (
142196< BackgroundColorContext . Provider value = { props . style . background } >
143197< DisabledContext . Provider value = { props . disabled } >
@@ -146,7 +200,7 @@ const ColumnLayout = (props: ColumnLayoutProps) => {
146200< ContainWrapper $style = { {
147201 ...props . style ,
148202display :"grid" ,
149- gridTemplateColumns :templateColumns ,
203+ gridTemplateColumns :gridTemplateColumns ,
150204 columnGap,
151205gridTemplateRows :templateRows ,
152206 rowGap,