水平弯曲居中并根据内容调整答案

【问题标题】：Flex center horizontally and adjust to content水平弯曲居中并根据内容调整
【发布时间】：2018-04-15 20:24:25
【问题描述】：

我有 3 个标签：A、B 和 C。每个选项卡包含不同大小的内容。 A 和 B 的水平尺寸相对较短，但可以垂直增长，而 C 包含一个表格，它也可以垂直增长，但主要是水平增长。

我想将所有内容（包括选项卡本身）水平居中，这样无论您单击哪个选项卡，所有内容始终居中（水平）并调整为内容（填充视图的 x% 或 100%溢出时的滚动条，即表格变得太宽）。

在尝试了不同类型的 flexbox 配置后，我总是以非居中或截断内容结束。后者意味着当单击 C 选项卡时，视图在左侧被切断 - 包括 A 选项卡的一半。

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

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

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

但是这样 - 如上所述 - 左侧的内容被切断 - 当点击 C 选项卡（包含表格，不适合视口）时

【问题讨论】：

您的代码有一些地方丢失了。

标签： html css flexbox centering

【解决方案1】：

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

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

如果不了解更多信息并且无法首先在评论中询问更多信息（愚蠢的 SO 应用程序），我建议您尝试将嵌套的后代减少到尽可能少。

我还建议研究 table-layout: fixed 和“如何使 tbody 可滚动”

【讨论】：