[Bug] Monaco Editor prevents <td> from shrinking in table-layout: auto (Standard Table Layout)

[SuperMarshtomp]

Reproducible in vscode.dev or in VS Code Desktop?

• Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

• Not reproducible in the monaco editor playground

Monaco Editor Playground Link

example

Monaco Editor Playground Code

const value = /* set from `myEditor.getModel()`: */ `function hello() {
	alert('Hello world!');
}`;

// Hover on each property to see its docs!
const myEditor = monaco.editor.create(document.getElementById("container"), {
	value,
	language: "javascript",
	automaticLayout: true,
});

const btn = document.getElementById('myButton');
  btn.onclick = function() {
	document.querySelector('#container').className = 'fullscreen'
};

const btn2 = document.getElementById('myButton2');
  btn2.onclick = function() {
	document.querySelector('#container').className = ''
};



<table style="width: 100%">
    <tr>
        <td>
            <div>123234234</div>
        </td>
        <td>
            <div id="container" style="height: 100px"></div>
        </td>
    </tr>
</table>
<div style="margin-top: 100px">
<button id="myButton">fullscreen</button>
<button id="myButton2">undo</button>
</div>



.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw !important;
    height: 100px;
    z-index: 9999;
    min-height: unset;
  }

Reproduction Steps

1. Go to the Monaco Editor Playground.

2. Wrap the editor container in a standard HTML table with table-layout: auto.

<table style="width: 100%; border: 1px solid red;">
  <tr>
    <td style="width: 200px;">Sidebar Content</td>
    <td>
      <div id="container" style="height: 400px; border: 1px solid blue;"></div>
    </td>
  </tr>
</table>

3. Initialize the editor with automaticLayout: true.

4. Try to resize the browser window to a narrower width.

5. Notice that as the window shrinks, the containing the editor stops shrinking once it reaches the initial width of the editor, eventually causing the table to overflow its parent container or the window.

Actual (Problematic) Behavior

In a table-layout: auto (default) environment, the is constrained by its "min-content" width. Since Monaco Editor renders its internal components (like the view-lines and scrollable layers) with absolute pixel widths, the browser treats these as non-shrinkable content.

Consequently, the refuses to become narrower than the editor's current width. Because the doesn't shrink, automaticLayout is never triggered to recalculate a smaller width, creating a deadlock where the table remains wide and breaks the responsive layout.

Expected Behavior

The should be able to shrink according to the table's flexible layout rules, even if its content (Monaco Editor) is currently wider. Once the width decreases, automaticLayout should detect the container's new size and re-render the editor with a matching smaller width.

Essentially, the internal canvas/DOM of the editor should not act as a "hard" minimum width constraint for a table cell.

Additional Context

The issue is specific to table-layout: auto. While switching to table-layout: fixed solves the shrinking problem, it is not a viable solution for many users because:

1. fixed layout ignores the natural width of other dynamic columns.

2. It forces a rigid structure that doesn't fit data-heavy applications where columns should adapt to their headers/content.

A potential workaround is to use position: absolute on the editor container to take it out of the document flow, but this requires a fixed height and extra wrapper divs, which is not an ideal developer experience.