Html 使v形树视图与flexbox中的行具有相同的高度

我有一支密码笔

我现在看到的是：

我想知道我需要改变什么，使红色区域被黄色区域覆盖…黄色区域是v-treeview组件的区域。红色区域仅在比左列中的内容短时出现

我试过将各种高度设置为100%，但我遗漏了一些东西

HTML:

---

只需在CSS中添加以下内容：

.v-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.v-window.v-item-group {
  flex-grow: 1;
}

.v-window__container {
  height: 100%;
}

---

只需在CSS中添加以下内容：

.v-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.v-window.v-item-group {
  flex-grow: 1;
}

.v-window__container {
  height: 100%;
}

---

我很好奇。像这样的解决方案是一种推荐做法还是被认为是一种黑客行为？我的下一个问题是。。。如果有两个组件可见，其中一个组件希望此样式仅适用于其中一个组件，而不适用于另一个组件，是否可能？我尝试在和doing#myID.v-tabs{}上设置一个id=“myID”，但我不清楚如何指定v-tabs的子项并将所需样式显式应用于它们。对于每个v-tabs，您添加一个

id

（

id=“a”

），它对应于您在

tabNames

中指定的选项卡名称。伟大的虽然这确实回答了这个问题，但当我尝试应用于常规的vue应用程序时，.v-window.v-item-group和.v-window\uu容器的样式似乎受到了践踏，没有得到应用。我很好奇。像这样的解决方案是一种推荐做法还是被认为是一种黑客行为？我的下一个问题是。。。如果有两个组件可见，其中一个组件希望此样式仅适用于其中一个组件，而不适用于另一个组件，是否可能？我尝试在和doing#myID.v-tabs{}上设置一个id=“myID”，但我不清楚如何指定v-tabs的子项并将所需样式显式应用于它们。对于每个v-tabs，您添加一个

id

（

id=“a”

），它对应于您在

tabNames

中指定的选项卡名称。伟大的虽然这确实回答了这个问题，但当我尝试应用于常规的vue应用程序时，.v-window.v-item-group和.v-window\uu容器的样式似乎被踩踏，无法应用。

.v-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.v-window.v-item-group {
  flex-grow: 1;
}

.v-window__container {
  height: 100%;
}