Html flex grow在列布局中不工作

我试图让

视图cntnr

占用

视图cntnr

和

菜单栏

div未使用的任何空间。为了实现这一点，我将flex显示设置为column direction。然后我将

视图cntnr

的

flex grow

属性设置为1。似乎什么都没做

注意：不确定这是否重要，但我有一些嵌套的flex显示正在进行

HTML

---

代码中的所有内容都运行良好

唯一的问题是，您的flex容器没有指定的高度。因此，高度解析为

auto

，表示内容的高度

flex grow

属性在容器中分配可用空间。由于容器中没有可用空间，

flex-grow

与此无关

尝试对CSS进行以下调整：

.analysis {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

这告诉flex容器是视口的高度。现在，容器的高度高于内容的高度，您将注意到

flex-grow

正在工作

---

.

我很好奇为什么

身高：100%不工作。当我像您的解决方案一样使用
100vh
时，它会起作用。。
.analysis {
  display: flex;
  flex-direction: column;
}


/* MENUBAR */

.menubar {
  padding: 4px 0 4px;
  background-color: #eee;
}


/* menubar */


/* VIEWS */

#views-cntnr {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}


/* ROW 1 */

.r1 {
  display: flex;
}

.r1 .view {
  flex-grow: 1;
  border: black 1px solid;
  border-right: none;
}

.r1 .view:last-child {
  border-right: black 1px solid;
}
/* row 1 */

/* ROW 2 */
.r2 .view {
  border: black 1px solid;
  border-top: none;
}


/* row 2 */


/* views */


/* FRAME CTRL */

#frame-ctrl-cntnr {
  display: flex;
}

.frame-ctrl {
  border: black 1px solid;
  border-top: none;
  border-right: none;
}

.frame-ctrl:last-child {
  border-right: black 1px solid;
}

#frame-num {
 width: 50px;
}

#frame-range-cntnr {
  flex-grow: 1;
  padding: 4px;
}

/* frame ctrl */

.analysis {
    display: flex;
    flex-direction: column;
    height: 100vh;
}