diff --git a/build/lib/stylelint/vscode-known-variables.json b/build/lib/stylelint/vscode-known-variables.json
index 1b606f2ad85..8929f43ee4a 100644
--- a/build/lib/stylelint/vscode-known-variables.json
+++ b/build/lib/stylelint/vscode-known-variables.json
@@ -697,6 +697,7 @@
 		"--background-light",
 		"--dropdown-padding-bottom",
 		"--dropdown-padding-top",
+		"--hover-maxWidth",
 		"--insert-border-color",
 		"--last-tab-margin-right",
 		"--monaco-monospace-font",
diff --git a/src/vs/base/browser/ui/hover/hover.css b/src/vs/base/browser/ui/hover/hover.css
index 0ce58199354..f008173e716 100644
--- a/src/vs/base/browser/ui/hover/hover.css
+++ b/src/vs/base/browser/ui/hover/hover.css
@@ -27,7 +27,7 @@
 }
 
 .monaco-hover .markdown-hover > .hover-contents:not(.code-hover-contents) {
-	max-width: 500px;
+	max-width: var(--hover-maxWidth, 500px);
 	word-wrap: break-word;
 }
 
diff --git a/src/vs/editor/contrib/hover/browser/contentHover.ts b/src/vs/editor/contrib/hover/browser/contentHover.ts
index cc0a0acd6a1..77bdf2a1170 100644
--- a/src/vs/editor/contrib/hover/browser/contentHover.ts
+++ b/src/vs/editor/contrib/hover/browser/contentHover.ts
@@ -556,12 +556,18 @@ export class ContentHoverWidget extends ResizableContentWidget {
 		this._layoutContentWidget();
 	}
 
-	private _setContentsDomNodeMaxDimensions(width: number | string, height: number | string): void {
+	private static _applyMaxDimensions(container: HTMLElement, width: number | string, height: number | string) {
 		const transformedWidth = typeof width === 'number' ? `${width}px` : width;
 		const transformedHeight = typeof height === 'number' ? `${height}px` : height;
-		const contentsDomNode = this._hover.contentsDomNode;
-		contentsDomNode.style.maxWidth = transformedWidth;
-		contentsDomNode.style.maxHeight = transformedHeight;
+		container.style.maxWidth = transformedWidth;
+		container.style.maxHeight = transformedHeight;
+	}
+
+	private _setHoverWidgetMaxDimensions(width: number | string, height: number | string): void {
+		ContentHoverWidget._applyMaxDimensions(this._hover.contentsDomNode, width, height);
+		ContentHoverWidget._applyMaxDimensions(this._hover.containerDomNode, width, height);
+		this._hover.containerDomNode.style.setProperty('--hover-maxWidth', typeof width === 'number' ? `${width}px` : width);
+		this._layoutContentWidget();
 	}
 
 	private _hasHorizontalScrollbar(): boolean {
@@ -579,7 +585,7 @@ export class ContentHoverWidget extends ResizableContentWidget {
 	}
 
 	private _setAdjustedHoverWidgetDimensions(size: dom.Dimension): void {
-		this._setContentsDomNodeMaxDimensions('none', 'none');
+		this._setHoverWidgetMaxDimensions('none', 'none');
 		const width = size.width;
 		const height = size.height;
 		this._setHoverWidgetDimensions(width, height);
@@ -594,6 +600,7 @@ export class ContentHoverWidget extends ResizableContentWidget {
 		const maxRenderingWidth = this._findMaximumRenderingWidth() ?? Infinity;
 		const maxRenderingHeight = this._findMaximumRenderingHeight() ?? Infinity;
 		this._resizableNode.maxSize = new dom.Dimension(maxRenderingWidth, maxRenderingHeight);
+		this._setHoverWidgetMaxDimensions(maxRenderingWidth, maxRenderingHeight);
 	}
 
 	protected override _resize(size: dom.Dimension): void {
@@ -670,13 +677,11 @@ export class ContentHoverWidget extends ResizableContentWidget {
 	}
 
 	private _layout(): void {
-		const height = Math.max(this._editor.getLayoutInfo().height / 4, 250, ContentHoverWidget._lastDimensions.height);
-		const width = Math.max(this._editor.getLayoutInfo().width * 0.66, 500, ContentHoverWidget._lastDimensions.width);
 		const { fontSize, lineHeight } = this._editor.getOption(EditorOption.fontInfo);
 		const contentsDomNode = this._hover.contentsDomNode;
 		contentsDomNode.style.fontSize = `${fontSize}px`;
 		contentsDomNode.style.lineHeight = `${lineHeight / fontSize}`;
-		this._setContentsDomNodeMaxDimensions(width, height);
+		this._updateMaxDimensions();
 	}
 
 	private _updateFont(): void {
@@ -696,17 +701,17 @@ export class ContentHoverWidget extends ResizableContentWidget {
 		this._hover.onContentsChanged();
 	}
 
-	private _updateContentsDomNodeMaxDimensions() {
+	private _updateMaxDimensions() {
 		const height = Math.max(this._editor.getLayoutInfo().height / 4, 250, ContentHoverWidget._lastDimensions.height);
 		const width = Math.max(this._editor.getLayoutInfo().width * 0.66, 500, ContentHoverWidget._lastDimensions.width);
-		this._setContentsDomNodeMaxDimensions(width, height);
+		this._setHoverWidgetMaxDimensions(width, height);
 	}
 
 	private _render(node: DocumentFragment, hoverData: ContentHoverVisibleData) {
 		this._setHoverData(hoverData);
 		this._updateFont();
 		this._updateContent(node);
-		this._updateContentsDomNodeMaxDimensions();
+		this._updateMaxDimensions();
 		this.onContentsChanged();
 		// Simply force a synchronous render on the editor
 		// such that the widget does not really render with left = '0px'