diff --git a/packages/web/src/widgets/WidgetColumnBar.svelte b/packages/web/src/widgets/WidgetColumnBar.svelte
index 45cafb9ca..c5da25125 100644
--- a/packages/web/src/widgets/WidgetColumnBar.svelte
+++ b/packages/web/src/widgets/WidgetColumnBar.svelte
@@ -1,38 +1,99 @@
 <script lang="ts">
-  import { setContext } from 'svelte';
+  import { onMount, setContext } from 'svelte';
   import { writable } from 'svelte/store';
-  import createRef from '../utility/createRef';
+  import _ from 'lodash';
 
   export let hidden = false;
 
   let definitions = [];
-  const dynamicPropsCollection = [];
   let clientHeight;
 
-  const widgetColumnBarHeight = writable(0);
+  // const widgetColumnBarHeight = writable(0);
+  const widgetColumnBarComputed = writable({});
+  let deltaHeights = {};
 
-  setContext('widgetColumnBarHeight', widgetColumnBarHeight);
-  setContext('pushWidgetItemDefinition', (item, dynamicProps) => {
-    dynamicPropsCollection.push(dynamicProps);
-    definitions = [...definitions, item];
-    return definitions.length - 1;
+  // setContext('widgetColumnBarHeight', widgetColumnBarHeight);
+  setContext('pushWidgetItemDefinition', (name, item) => {
+    definitions = {
+      ...definitions,
+      [name]: {
+        ...item,
+        name,
+        index: definitions.length,
+      },
+    };
   });
-  setContext('updateWidgetItemDefinition', (index, item) => {
-    definitions[index] = item;
+  setContext('updateWidgetItemDefinition', (name, item) => {
+    definitions = {
+      ...definitions,
+      [name]: { ...definitions[name], ...item },
+    };
   });
+  setContext('widgetResizeItem', (name, deltaHeight) => {
+    deltaHeights = {
+      ...deltaHeights,
+      [name]: (deltaHeights[name] || 0) + deltaHeight,
+    };
+    recompute(definitions);
+  });
+  setContext('widgetColumnBarComputed', widgetColumnBarComputed);
 
-  $: $widgetColumnBarHeight = clientHeight;
+  // $: $widgetColumnBarHeight = clientHeight;
 
-  $: computeDynamicProps(definitions);
+  $: recompute(definitions);
 
-  function computeDynamicProps(defs: any[]) {
-    const visibleItemsCount = defs.filter(x => !x.collapsed && !x.skip).length;
-    for (let index = 0; index < defs.length; index++) {
-      const definition = defs[index];
-      const splitterVisible = !!defs.slice(index + 1).find(x => x && !x.collapsed && !x.skip && x.positiveCondition);
-      dynamicPropsCollection[index].set({ splitterVisible, visibleItemsCount });
+  function recompute(defs: any) {
+    const visibleItems = _.values(defs)
+      .filter(x => !x.collapsed && !x.skip)
+      .map(x => x.name);
+    const visibleItemsCount = visibleItems.length;
+
+    const computed = {};
+
+    let totalFixedHeight = 0;
+    let totalFlexibleItems = 0;
+    for (const key of visibleItems) {
+      const def = defs[key];
+      if (def.height != null) {
+        let height = 0;
+        if (_.isString(def.height) && def.height.endsWith('px')) height = parseInt(def.height.slice(0, -2));
+        else if (_.isString(def.height) && def.height.endsWith('%'))
+          height = (clientHeight * parseFloat(def.height.slice(0, -1))) / 100;
+        else height = parseInt(def.height);
+        totalFixedHeight += height;
+      } else {
+        totalFlexibleItems++;
+      }
     }
+
+    const remainingHeight = clientHeight - totalFixedHeight;
+    let visibleIndex = 0;
+    for (const key of visibleItems) {
+      const def = defs[key];
+      let size = 0;
+      if (def.height != null) {
+        if (_.isString(def.height) && def.height.endsWith('px')) size = parseInt(def.height.slice(0, -2));
+        else if (_.isString(def.height) && def.height.endsWith('%'))
+          size = (clientHeight * parseFloat(def.height.slice(0, -1))) / 100;
+        else size = parseInt(def.height);
+      } else {
+        size = remainingHeight / totalFlexibleItems;
+      }
+      size += deltaHeights[key] || 0;
+      computed[key] = {
+        size,
+        splitterVisible: visibleItemsCount > 1 && visibleIndex < visibleItemsCount - 1,
+        visibleItemsCount,
+      };
+      visibleIndex++;
+    }
+
+    $widgetColumnBarComputed = computed;
   }
+
+  onMount(() => {
+    recompute(definitions);
+  });
 </script>
 
 <div class="main-container" bind:clientHeight class:hidden>
diff --git a/packages/web/src/widgets/WidgetColumnBarItem.svelte b/packages/web/src/widgets/WidgetColumnBarItem.svelte
index c48678f9f..276e3ac5e 100644
--- a/packages/web/src/widgets/WidgetColumnBarItem.svelte
+++ b/packages/web/src/widgets/WidgetColumnBarItem.svelte
@@ -17,55 +17,45 @@
 
   export let storageName = null;
   export let onClose = null;
+  export let minimalHeight = 100;
+  export let name;
 
-  let size = 0;
+  // let size = 0;
 
-  const dynamicProps = writable({
-    splitterVisible: false,
-    visibleItemsCount: 0,
-  });
+  // const dynamicProps = writable({
+  //   splitterVisible: false,
+  //   visibleItemsCount: 0,
+  // });
 
   const pushWidgetItemDefinition = getContext('pushWidgetItemDefinition') as any;
   const updateWidgetItemDefinition = getContext('updateWidgetItemDefinition') as any;
-  const widgetColumnBarHeight = getContext('widgetColumnBarHeight') as any;
-  const widgetItemIndex = pushWidgetItemDefinition(
-    {
-      collapsed,
-      height,
-      skip,
-      positiveCondition,
-    },
-    dynamicProps
-  );
+  // const widgetColumnBarHeight = getContext('widgetColumnBarHeight') as any;
+  const widgetResizeItem = getContext('widgetResizeItem') as any;
+  const widgetColumnBarComputed = getContext('widgetColumnBarComputed') as any;
+  pushWidgetItemDefinition(name, {
+    collapsed,
+    height,
+    skip,
+    positiveCondition,
+  });
 
-  $: updateWidgetItemDefinition(widgetItemIndex, { collapsed: !visible, height, skip, positiveCondition });
+  $: updateWidgetItemDefinition(name, { collapsed: !visible, height, skip, positiveCondition });
 
-  $: setInitialSize(height, $widgetColumnBarHeight);
+  // $: setInitialSize(height, $widgetColumnBarHeight);
 
-  $: if (storageName && $widgetColumnBarHeight > 0) {
-    setLocalStorage(storageName, { relativeHeight: size / $widgetColumnBarHeight, visible });
-  }
-
-  function setInitialSize(initialSize, parentHeight) {
-    if (storageName) {
-      const storage = getLocalStorage(storageName);
-      if (storage) {
-        size = parentHeight * storage.relativeHeight;
-        return;
-      }
-    }
-    if (_.isString(initialSize) && initialSize.endsWith('px')) size = parseInt(initialSize.slice(0, -2));
-    else if (_.isString(initialSize) && initialSize.endsWith('%'))
-      size = (parentHeight * parseFloat(initialSize.slice(0, -1))) / 100;
-    else size = parentHeight / 3;
-  }
+  // $: if (storageName && $widgetColumnBarHeight > 0) {
+  //   setLocalStorage(storageName, { relativeHeight: size / $widgetColumnBarHeight, visible });
+  // }
 
   let visible =
     storageName && getLocalStorage(storageName) && getLocalStorage(storageName).visible != null
       ? getLocalStorage(storageName).visible
       : !collapsed;
 
-  $: collapsible = $dynamicProps.visibleItemsCount != 1 || !visible;
+  $: computed = $widgetColumnBarComputed[name] || {};
+  $: collapsible = computed.visibleItemsCount != 1 || !visible;
+  $: size = computed.size ?? 100;
+  $: splitterVisible = computed.splitterVisible;
 </script>
 
 {#if !skip && positiveCondition}
@@ -79,14 +69,18 @@
   {#if visible}
     <div
       class="wrapper"
-      style={$dynamicProps.splitterVisible ? `height:${size}px` : 'flex: 1 1 0'}
+      style={splitterVisible ? `height:${size}px` : 'flex: 1 1 0'}
       data-testid={$$props['data-testid'] ? `${$$props['data-testid']}_content` : undefined}
     >
       <slot />
     </div>
 
-    {#if $dynamicProps.splitterVisible}
-      <div class="vertical-split-handle" use:splitterDrag={'clientY'} on:resizeSplitter={e => (size += e.detail)} />
+    {#if splitterVisible}
+      <div
+        class="vertical-split-handle"
+        use:splitterDrag={'clientY'}
+        on:resizeSplitter={e => widgetResizeItem(name, e.detail)}
+      />
     {/if}
   {/if}
 {/if}