Strange issue with tabs + columns

And another my thought: maybe it will be more user-friendly to make API looking like this:

fields => array (
    columns => array(
       size => 4,
       class => 'custom-column-class',
       fields => array (
         //you can add multiple fields here
       ),
    ),
    columns => array(
       size => 4,
       class => 'custom-column-class',
       fields => array (
         //you can add multiple fields here
       ),
    ),
    columns => array(
       size => 4,
       class => 'custom-column-class',
       fields => array (
         //you can add multiple fields here or leave empty
       ),
    ),
)

Oh, suddenly I've got another great idea: just make a flex-grid based extension with a markup, such as I gave. If you like it, I can generate here the full list of options.

$meta_boxes[] = array(
	'title'      => 'Flex Metabox',
	'tabs'      => array(
		'tab_1' => array(
			'label' => 'Sample tab 1',
		),
		'tab_2'  => array(
			'label' => 'Sample tab 2',
		),
	),
	'fields'     => array(

		
		'flex' => array( //defining, css display: flex; wrapper, can be used without any openssl_get_cert_locations

				'align-items' 			=> 'center', //simular to css align-items prop.
				'justify-content'		=> 'flex-end', //simular to css justify-content prop.
				'flex-wrap'			    => 'wrap', //simular to css flex-wrap prop. Used in case when you want to build your metabox mobile-friendly
				'flex-direction'		=> 'row-reverse', //simular to css flex-direction prop.
				'class'								=> 'custom-class', //if user want to define it's own style for this flex wrapper
				'tab'  				=> 'tab_1',
				'fields'	=> array( //can hold single fields or new field types 'flex-item' or mixed
							'flex-item' => array(
								  'flex-basis' => '50%', //simular to css flex-basis prop. Could handle any type af value, for example 100px, 33%, calc(100% - 50px)
									'flex-shrink' => '0', //simular to css flex-shrink prop.
									'fields'	=> array(
											array(
												'name' => 'Sample Field 1',
												'id'   => 'sf1',
												'type' => 'text',
											),
											array(
												'name' => 'Sample Field 2',
												'id'   => 'sf2',
												'type' => 'text',
											)
									)
							),
							array( //an example for single field without 'flex-item' div wrapper
								'name' 				              => 'Sample Field 3',
								'id'   				              => 'sf3',
								'type' 				              => 'text',
							  'flex-basis' => '200px', //can hold flex props too
								'flex-shrink' => '0',
							)
				)

			
		),
		array( //an example for single field outside flex wrapper. It's behave itself like common field
			'name' 	=> 'Sample Field 4',
			'id'   	=> 'sf4',
			'type' 	=> 'text',
			'tab'  	=> 'tab_1',
		),
		array( //an example for single field outside flex wrapper and in another tab. It's behave itself like common field
			'name' 	=> 'Sample Field 5',
			'id'   	=> 'sf5',
			'type' 	=> 'text',
			'tab'  	=> 'tab_2',
		)
		
	)
);

It's very heavy, I know. And this extension will be for pro users, who defenetely know for what they use it and know what css flex is.

The advantages of this idea:
1) Flexbox is native and, excepting lot's of nested arrays, it's very simple. Also if developer will have very heavy nested array - he can just define each block as single outside and use it like 'fields' => $product_attr_array - I have such experiense for one o my projects (social network)
2) It's allows to build any type of UI. Nested mobile-friendly columns, vertical-alignment ect. - anything you want. Some developers like me need this feature, I know (for now I need to break my mind with wrapping fields with 'custom_html' fields and other tricks)
3) This extension is easy to create. Also if you don't like my idea, I will try to make this extension by my own. I think it will not take lots of time.