卡片宽度

Question

我正在尝试构建一个垂直的卡片组，如果大于使用Simantic-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>    

我的.css文件：

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

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

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

是什么导致我的表溢出？帮助赞赏。

Answer 1

尝试使用ui segment代替ui card，这可以解决溢出而无需更改Panel设置。对于垂直滚动条，将css更改为：

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

这是一个有效的Demo

PS：除非您将ui segment更改为ui vertical segment docs

，否则有时段不会垂直