我发现当缩小不好使 是因为xterm-viewport这个样式

目前的解决办法就是 初始化的时候 不使用fit ，并将col设置小点

This looks like an issue on your end, the element's container probably isn't going below a certain width so fit keeps it set to some minimum.

@Tyriar 这不是我的问题，我在测试中发现，<div class="xterm-viewport" style="background-color: rgb(24, 29, 40); width: 74px;">...</div> 这里的style width始终是页面初始化的width，而且一直不变的。因为这个不变导致屏幕的宽度小于这个宽度就会出现异常

。

@Tyriar xterm-viewport. style width

I encountered this problem too. I'll try to give a demo which can reproduce this problem.

Here is a demo: https://codepen.io/deximy/pen/ZEXExdp
When I open the page with maximum width, everything is ok:

But when I try to decrease the width, xterm-viewport doesn't change with xterm-screen. It looks like this:

↑left of the page

↑right of the page

The scroll bar is back, and a lot of black space appears on the right of the page.
Here are the attributes of element:

I don't know whether if there is a wrong in my use. Please help me for check. Thank you. @Tyriar

Guess it is an issue on our end. This doesn't happen in vscode because viewport is absolutely positioned such that the scroll bar is right aligned to the container.

Guess it is an issue on our end. This doesn't happen in vscode because viewport is absolutely positioned such that the scroll bar is right aligned to the container.

So you mean I need to check some part of the code about the viewport so that I could solve this problem, right?

It is irrelevant to this question, is there any usage of native js for fit plugin?

@deximy if you want to try fix it yes.

@Bryce-huang it's all js: https://github.com/xtermjs/xterm.js/tree/master/addons/xterm-addon-fit

Use "xterm": "~ 4.10.0", which solves my problem

Use "xterm": "~ 4.10.0", which solves my problem

Now I am using "xterm": "^4.15.0". I'll try to downgrade.

I've been running into this issue also. I'm using xterm 4.16.0.

It might be related to the width calculation in Viewport._innerRefresh(), rather than the fit add-on. The width is explicitly calculated based on the number of columns, so the viewport's scrollbar will be aligned to an integer column count rather than the edge of the parent window. e.g.:

If the number of columns doesn't match the outer xterm's width then the viewport's scrollbar would appear in the middle of the screen. In my case, the main symptom would be the scrollbar appearing before the right edge of the screen, rather than exactly at the end. The scrollbar would also jump when the viewport was resized.

I see that with VS Code, the xterm.js CSS is overridden quite a bit, but I couldn't identify what prevented the manifestation of the issue in VS Code.
https://github.com/microsoft/vscode/blob/17b2d1c97906d4538990ed3ab0200e3fafb98a35/src/vs/workbench/contrib/terminal/browser/media/terminal.css

As a temporary work-around, I only found the following, which effectively disables the above width and has to use an !important:

    .xterm .xterm-viewport {
        width: initial !important; 
    }

Which leads to the question - does this width really needs to be set and instead use CSS to position viewport, or could there be side effects as a result of removing this?

I hope the extra information may help in resolving the issue.

I have also been looking into this. Generally, we were seeing weird resizing behaviour where the term viewport wouldn't match the width of its container (we are also using the addon-fit module).

I was previously on 4.13.0 where there was no issue with the width or resizing. Using a pinned upgrade, I noticed the issue was introduced in 4.14.0. I have tested all the way up to and including 4.17.0 and the issue remains.

The workaround described by @BitStream1 works to patch this issue (I tested it on 4.14.0 and 4.17.0)

.xterm-viewport {
    width: initial !important;
}

I got the same problem.
But i found this way, it's work for me :

<div class="terminal-container">
    <div id="terminal"></div>
</div>

import { Terminal } from "xterm";
import { FitAddon } from "xterm-addon-fit";
const term = new Terminal(...);

const fitAddon = new FitAddon();
term.loadAddon(fitAddon);
term.open(document.querySelector("#terminal"));
fitAddon.fit();

window.onresize = function () {
    fitAddon.fit();
};

.terminal-container{
    /* this is important */
    overflow: hidden;
}
.xterm .xterm-viewport {
    /* see : https://github.com/xtermjs/xterm.js/issues/3564#issuecomment-1004417440 */
    width: initial !important;
}