@@ -81,15 +81,27 @@ const ContainWrapper = styled.div<{
8181${ props => props . $style && getBackgroundStyle ( props . $style ) }
8282` ;
8383
84+ const getColumnWidth = ( column :any ) :string => {
85+ // Use explicit width if available
86+ if ( column . width ) {
87+ return column . width ;
88+ }
89+
90+ // No explicit width - return auto to let flex handle it
91+ return 'auto' ;
92+ } ;
93+
8494const ColWrapper = styled . div < {
8595$style :ResponsiveLayoutColStyleType | undefined ,
8696$width :string ,
8797$matchColumnsHeight :boolean ,
8898$useFlexLayout :boolean ,
99+ $hasExplicitWidth :boolean ,
89100} > `
90101${ props => props . $useFlexLayout ?`
91- flex:${ props . $width === '100%' ?'1 0 100%' :`0 0${ props . $width } }
92- max-width:${ props . $width }
102+ ${ props . $hasExplicitWidth
103+ ?`flex: 0 0${ props . $width } ${ props . $width }
104+ :'flex: 1 1 0%; min-width: 0;' }
93105 ` :'' }
94106
95107 > div {
@@ -143,20 +155,6 @@ const ColumnContainer = (props: ColumnContainerProps) => {
143155) ;
144156} ;
145157
146- const getColumnWidth = ( column :any ) :string => {
147- // Use explicit width if available
148- if ( column . width ) {
149- // For percentage values, calculate precisely to accommodate gaps
150- if ( column . width . endsWith ( '%' ) ) {
151- return column . width ;
152- }
153- return column . width ;
154- }
155-
156- // If minWidth is set, use it or default to equal distribution
157- return column . minWidth || 'auto' ;
158- } ;
159-
160158const ColumnLayout = ( props :ColumnLayoutProps ) => {
161159let {
162160 columns,
@@ -195,6 +193,7 @@ const ColumnLayout = (props: ColumnLayoutProps) => {
195193if ( ! containers [ id ] ) return null
196194const containerProps = containers [ id ] . children ;
197195const columnWidth = getColumnWidth ( column ) ;
196+ const hasExplicitWidth = ! ! column . width ;
198197
199198return (
200199< BackgroundColorContext . Provider key = { id } value = { props . columnStyle . background } >
@@ -203,6 +202,7 @@ const ColumnLayout = (props: ColumnLayoutProps) => {
203202$width = { columnWidth }
204203$matchColumnsHeight = { matchColumnsHeight }
205204$useFlexLayout = { useFlexLayout }
205+ $hasExplicitWidth = { hasExplicitWidth }
206206>
207207< ColumnContainer
208208layout = { containerProps . layout . getView ( ) }