layout splitview views with absolute positioning

related to #78167

src/vs/base/browser/ui/splitview/splitview.css

@@ -21,24 +21,15 @@
 }
 
 .monaco-split-view2 > .split-view-container {
-	display: flex;
 	width: 100%;
 	height: 100%;
 	white-space: nowrap;
-}
-
-.monaco-split-view2.vertical > .split-view-container {
-	flex-direction: column;
-}
-
-.monaco-split-view2.horizontal > .split-view-container {
-	flex-direction: row;
+	position: relative;
 }
 
 .monaco-split-view2 > .split-view-container > .split-view-view {
 	white-space: initial;
-	flex: none;
-	position: relative;
+	position: absolute;
 }
 
 .monaco-split-view2 > .split-view-container > .split-view-view:not(.visible) {
@@ -72,4 +63,4 @@
 .monaco-split-view2.separator-border.vertical > .split-view-container > .split-view-view:not(:first-child)::before {
 	height: 1px;
 	width: 100%;
-}
+}

src/vs/base/browser/ui/splitview/splitview.ts

@@ -125,10 +125,13 @@ abstract class ViewItem {
 		}
 	}
 
-	layout(orthogonalSize: number | undefined): void {
+	layout(position: number, orthogonalSize: number | undefined): void {
+		this.layoutContainer(position);
 		this.view.layout(this.size, orthogonalSize);
 	}
 
+	abstract layoutContainer(position: number): void;
+
 	dispose(): IView {
 		this.disposable.dispose();
 		return this.view;
@@ -137,16 +140,16 @@ abstract class ViewItem {
 
 class VerticalViewItem extends ViewItem {
 
-	layout(orthogonalSize: number | undefined): void {
-		super.layout(orthogonalSize);
+	layoutContainer(position: number): void {
+		this.container.style.top = `${position}px`;
 		this.container.style.height = `${this.size}px`;
 	}
 }
 
 class HorizontalViewItem extends ViewItem {
 
-	layout(orthogonalSize: number | undefined): void {
-		super.layout(orthogonalSize);
+	layoutContainer(position: number): void {
+		this.container.style.left = `${position}px`;
 		this.container.style.width = `${this.size}px`;
 	}
 }
@@ -846,7 +849,12 @@ export class SplitView extends Disposable {
 		this.contentSize = this.viewItems.reduce((r, i) => r + i.size, 0);
 
 		// Layout views
-		this.viewItems.forEach(item => item.layout(this.orthogonalSize));
+		let position = 0;
+
+		for (const viewItem of this.viewItems) {
+			viewItem.layout(position, this.orthogonalSize);
+			position += viewItem.size;
+		}
 
 		// Layout sashes
 		this.sashItems.forEach(item => item.sash.layout());