水平弯曲中心并根据内容进行调整

Question

我有3个标签：A，B和C. 每个标签包含不同大小的内容。 A和B水平相对较短，但可以垂直生长，但C包含一个可以垂直生长但大多数水平生长的桌子。

我想将所有内容（包括标签本身）水平居中，这样无论您点击哪个标签，所有内容始终居中（水平）并调整为内容（填充视图的x％或100％与在溢出的情况下滚动条，即表格变得太宽。

在尝试不同类型的弹性箱配置后，我总是找不到中心或切断内容。后者意味着当人们点击C标签时，视图在左侧被切断 - 包括A标签的一半。

到目前为止，我得到了（我在其间省略了一些div）：

+---------.content----------+
|                           |
|    +-----------------+    |
|    |  A  |  B  |  C  |    |
|    +-----------------+    |
|    |                 |    |
|    |                 |    |
|    |                 |    |
|    +-----------------+    |
+---------------------------+

.content {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

然而，如上所述 - 内容在左侧被切断 - 当点击C-tab（包含表格，不适合视口）时

Answer 1

display: flex仅影响其直系后代。

桌子也是一种不寻常的野兽。

如果不知道更多信息并且无法在评论中提出更多信息（愚蠢的SO应用程序），我建议您尝试尽可能减少嵌套后代。

我还建议调查table-layout: fixed和＆＃34;如何使tbody可滚动＆＃34;