垂直对齐的引导卡没有响应答案

【问题标题】：Bootstrap cards aligned vertically not responsive垂直对齐的引导卡没有响应
【发布时间】：2021-02-08 11:48:57
【问题描述】：

我有 2 张彼此重叠的引导卡，但它们的高度没有响应。当我将它们放在父 div 中并给该 div 一个固定的高度时，里面有桌子的下卡将超过高度。为了更清楚地说明这一点，我在这里复制了这个问题：https://stackblitz.com/edit/bootstrap-8h1b14?file=app/app.component.css

我想要实现的是 2 个响应垂直对齐的卡片适合父 div，但如果没有硬编码计算（我不想要）似乎无法找到正确的解决方案。

【问题讨论】：

你把卡片和标签混在一起，说真的，你为什么这样做？结果，您将桌子包裹在 5 中！分区。卓越。请考虑减少 div，它可能会更容易。如果它是有效的，整个 allergyWrapper 是可滚动的，那么只需将 overflow-y: auto 样式添加到它。
在我的应用程序中，选项卡实际上是功能和样式，所以这就是原因。我可能会这样解决它，但我更愿意让表格单独滚动

标签： html css angular bootstrap-4

【解决方案1】：

您只需使用flex-direction: column; 将您的.allergyWrapper 制作成一个弹性容器，并允许卡片根据需要增长或缩小。

以下 css 处理卡片大小

.allergyWrapper{
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.mycard {
  flex-grow: 1;
  flex-shrink: 1;
  overflow: hidden;
}

然后为了让表格主体滚动，我发现this article 很有帮助。然后我不得不将表格行变成 flexbox 行来填充宽度（重新创建 bs 表格样式）。

.mycard tbody {
  display: block;
  overflow: auto;
  height: 100%;
  width: 100%;
}
.mycard tr {
  display: flex;
  width: 100%;
  flex-direction: row;
  align-items: stretch;
}
.mycard td,
.mycard th {
  flex-grow: 1;
}

下一步

删除表格包装<div style="overflow-y: auto;">
将.h-100 添加到以下每个元素
- table
- div.tab-pane
- div.tab-content

My fork of your stack

【讨论】：

尝试实现后，发现它会滚动卡片中的所有内容，是否可以只在桌子上启用滚动？我试图用 flexbox 方法来实现它，但无法解决它
@r0699049 我已经更新了我的答案，只让表格正文滚动

【解决方案2】：

只需在父级 (.allergyWrapper) 中提供 overflow-hidden 类

https://stackblitz.com/edit/bootstrap-cjaupc?file=app%2Fapp.component.html

【讨论】：

但是它会切断下卡中的内容，这是我不想要的。
如果你给父级固定高度，有些部分会被剪掉，这是事实
那你想要什么？
有没有办法让它适合父母内部而不切割？我将此组件用作主应用程序中的库，在此主应用程序中，此组件位于具有固定高度的 div 内（用户可以选择和设置 div 的高度），所以我希望它适合那里很好地没有削减内容
所以如果内容超过你的固定高度，让它可滚动