html - 创建缩小到内容大小的 flexbox 选项卡

Question

我的网页布局使用 flexbox。我正在尝试创建一个选项卡内容组件，它会自动调整到最大的选项卡内容。理想情况下，我也希望它在状态之间消失。我正在尝试通过使用 position: absolute 将 myTabContents1 和 myTabContents2 叠加在一起来实现这一点。然后，我使用 visibility 和 opacity 选择可见的那个。

所以 DOM 看起来基本上是这样的(为了简单起见，这里我只显示标签页的内容，而不是用于在它们之间切换的实际用户控件):

<div class='tabContentsList'>
    <div class='tabContentsItem'>
        Contents of first tab
    </div>
    <div class='tabContentsItem activeTab'>           
        Contents of second tab.
    </div>
</div>

我的 CSS 是:

.tabContentsList {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}

.tabContentsItem {
    display: flex;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.3s linear, opacity 0.3s linear;
}

.tabContentsItem.activeTab {
    opacity: 1;
    visibility: visible;
}

当你切换标签时，这会正确地产生淡入淡出的效果。但是，tabContentsList 元素的大小无法包含 tabContentsItem 元素 - 它基本上将它们视为零大小，因此它们最终会溢出边界。我试过将 right: 0 替换为 width: 100% 等，但这没有帮助。另一方面，如果您删除 position: absolute，则容器会扩展以容纳两个选项卡的内容，但定位显然不正确 - 不可见选项卡留有空白空间。显然 flexbox 和 position: absolute 之间存在已知的冲突。

那么还有其他方法可以实现吗？例如，是否有另一种方法可以覆盖不使用 position: absolute 的两个选项卡内容并且 flexbox 会尊重？如果可以使它工作，这似乎是一个有用的工具。感谢您的任何想法。

Answer 1

如果您考虑使用 display:grid 而不是 flex，您可以将每个标签堆放在同一位置并根据最宽和最高来调整它们的大小:

#tabsthing {
  display: grid;
  grid-template-areas: "tab  . ";
  grid-template-columns: auto 1fr;
}

a {
  grid-area: tab;
}


/* make up for demo purpose */

a:hover {
  opacity: 0;
}
a {
  border: solid;
  padding: 1em;
  background: turquoise;
  transition: 1s;
  opacity: 0.5;
}

a+a {
  background: tomato;
  text-align: right;
}

a:last-of-type {
  background: yellow;
}

<div id="tabsthing">
  <a href="#one">One of three<br/>next line</a>
  <a href="#two">second of three</a>
  <a href="#three"> third of a test about lenght</a>
</div>

https://codepen.io/gc-nomade/pen/pWWQVN

免责声明:毕竟这可能是一项可靠的专用 javascript 工作。