Javascript 语义UI侧边栏转换问题

我是webdev的新手。我正在尝试使用语义ui来构建一个简单的web门户

我在使用边栏组件时遇到了一个问题。我希望侧边栏的行为如下

https://adminlte.io/themes/AdminLTE/index2.html

侧边栏显示/折叠时主体内容收缩/扩展的位置

但无论我在语义ui的侧栏（推/缩放）上选择什么设置/转换方法，身体的某些部分都会移出屏幕。我只希望内容在不超过视口宽度的情况下收缩和扩展。 下面是我展示问题的部分：

https://jsfiddle.net/vinu_tlg/L5eqt3f4/

有人能告诉我如何在语义ui中实现这种行为吗

有人问了一个类似的问题，但我看不到任何关于如何实现这一目标的答案

感谢你的指点。提前谢谢

添加此样式

.sidebar.visible + .pusher {
  width: calc(100% - 260px);
}
body.pushable {
   background-color: white !important;
}

更新

---

谢谢。我理解代码的第一部分，但是你能解释一下第二部分你将bg颜色设置为白色吗？它有什么意义？我还看到这种转变非常突然。我有什么办法可以把事情弄清楚吗？非常感谢你的帮助。我添加了白色，因为当它回到原来的位置时，在主要内容后面可以看到灰色背景。您可以尝试删除该样式，您将看到。至于转换，我尝试了一些东西，但没有成功，我会再试一次，让你知道：）@exp8尝试添加这个。pushable>.pusher{transition:all 1s ease；}