Html 语义UI表内部卡片宽度

我正在尝试构建一个垂直的卡片面板，如果大于屏幕大小，则可以使用语义UI打开垂直滚动条：

下面是HTML代码：

<div className="ui fluid container">
  <div className="Panel">
        <div className="ui card">
          <div className="content">
            <div className="header">CARD 1
            </div>
            <div className="content">
              <table className="ui celled striped compact table">
                <thead>
                  <tr>
                    <th>Ref</th>
                    <th>Item</th>
                    <th>Qty</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td className="center aligned">ABC123</td>
                    <td className="left aligned">Item ABC123 Description 1</td>
                    <td className="center aligned">86</td>
                  </tr>
                  <tr>
                    <td className="center aligned">DEF456</td>
                    <td className="left aligned">Item DEF456 Description 2</td>
                    <td className="center aligned">222</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
  </div>
</div>    

由于我的面板设置，表格水平溢出卡，如下图所示：

如果我删除面板设置，一切正常，但我需要为卡片容器（面板）设置这些设置

---

是什么导致我的表溢出？

尝试使用

ui段

而不是

ui卡

，这样可以在不更改面板设置的情况下解决溢出问题。对于垂直滚动条，将css更改为：

.Panel {
  max-height: calc(100vh - 70px); 
  overflow-x: hidden;
  overflow-y: auto;
  white-space: nowrap;
  max-width:350px
}

这是一张工作票

---

PS：有时段不会垂直，除非您将

ui段

更改为

ui垂直段

是否可能是没有设置宽度的父div？

.Panel {
  max-height: calc(100vh - 70px); 
  overflow-x: hidden;
  overflow-y: auto;
  white-space: nowrap;
  max-width:350px
}