@@ -87,7 +87,7 @@ const ColWrapper = styled(Col)<{
8787 flex-basis:${ ( props ) =>
8888props . $rowBreak
8989 ?`calc(100% / var(--columns))` // Force exact column distribution
90- :`clamp(${ props . $minWidth } } ; // MinWidth respected
90+ :`clamp(${ props . $minWidth || "0px" } calc( 100% / var(--columns) ), 100%)` } ; // MinWidth respected
9191
9292 min-width:${ ( props ) => props . $minWidth }
9393 max-width: 100%; // Prevent more columns than allowed
@@ -237,7 +237,8 @@ const ResponsiveLayout = (props: ResponsiveLayoutProps) => {
237237if ( ! containers [ id ] ) return null ;
238238const containerProps = containers [ id ] . children ;
239239
240- const calculatedWidth = 100 / numberOfColumns ;
240+ // Use the actual minWidth from column configuration instead of calculated width
241+ const columnMinWidth = column . minWidth || `${ 100 / numberOfColumns } ;
241242
242243return (
243244< ColWrapper
@@ -247,7 +248,7 @@ const ResponsiveLayout = (props: ResponsiveLayoutProps) => {
247248sm = { rowBreak ?24 / numberOfColumns :undefined }
248249xs = { rowBreak ?24 / numberOfColumns :undefined }
249250$style = { props . columnStyle }
250- $minWidth = { ` ${ calculatedWidth } px` }
251+ $minWidth = { columnMinWidth }
251252$matchColumnsHeight = { matchColumnsHeight }
252253$rowBreak = { rowBreak }
253254>