Javascript 使用Flexbox的最小和最大高度

现在我有一个flex专栏，里面有两个项目，我正试图找出如何获得我想要的行为。特别是，我试图强制要求内的项目具有一定的最小和最大高度

• 第一项

  item1

  位于顶部。它应该扩大到包含所需的尽可能多的垂直空间，但在任何情况下都不应缩小到50%以下；如果内容大于此值，则应垂直滚动
第二项<代码> ITEM2<代码>在中间。不大于其含量，但在任何情况下不得超过50%；如果内容大于此值，则应垂直滚动
• 在

  item1

  将扩展超过50%，但

  item2

  不扩展的情况下，

  item2

  不应收缩，使其小于其内容

  item1

  应该开发一个垂直滚动条
• 在

  item1

  和

  item2

  都充满内容的情况下（太多，无法放入可用空间），它们都应该占据50%的可用空间。这就是说，

  item2

  的增长优先于

  item1

  的增长
• 整个立柱应始终保持在固定高度内

（我保证我不是在要求别人，我只是想说得非常具体！）

以下是我目前拥有的SCSS代码：

.column {
  display: flex;
  flex-direction: column;

  .item1 {
    flex: 1 1 auto;
    overflow-y: scroll;
  }

  .item2 {
    flex: 0 1 auto;
    overflow-y: scroll;
  }
}

这在很大程度上帮助了我，但在两个项目都失控的情况下，

item2

最终会超过

item1

。另外，在只有

item1

变得过大的情况下，

item2

会缩小，我不希望这样

但总而言之，并真正回答这个问题最紧迫的部分，我可以结合Flexbox使用最大高度和最小高度吗？如何使用？简单地添加

min height

和

max height

似乎没有效果

编辑：有人要求提供一个工作示例。这应该行得通，尽管它可能会让你失明

---

编辑2：代码现在有独立的

item1

和

item2

，使得

item3

不相关，所以我删除了它。

让我们看看这是否是您想要的

我已经从item2中删除了flex基础，并以某种方式调整了样式

.column{
显示器：flex；
弯曲方向：立柱；
高度：500px；
}
.栏.第1项{
背景色：红色；
弹性：1050%；
溢出y：滚动；
}
.栏.第2项{
背景颜色：蓝色；
flex-grow:0；
弹性收缩：1；
最大高度：50%；
溢出y：滚动；
}
文本区{
调整大小：垂直；
}

---

让我们看看这是否是您想要的

我已经从item2中删除了flex基础，并以某种方式调整了样式

.column{
显示器：flex；
弯曲方向：立柱；
高度：500px；
}
.栏.第1项{
背景色：红色；
弹性：1050%；
溢出y：滚动；
}
.栏.第2项{
背景颜色：蓝色；
flex-grow:0；
弹性收缩：1；
最大高度：50%；
溢出y：滚动；
}
文本区{
调整大小：垂直；
}

请提供一个工作示例Yes..可以使用bothI无法理解第一项item1位于顶部的部分。它应该扩大到包含所需的尽可能多的垂直空间，但在任何情况下都不应缩小到50%以下；如果内容大于此值，则应滚动vertically@vals对不起，这句话用词很混乱。它的最小大小为50%，但只要不强制

item2

收缩，它就可以根据需要增长。同时，

item2

可以增长到50%。如果

item1

或

item2

的内容大于当前允许的空间，则应垂直滚动。现在清除得多！我将尝试找到解决方案请提供一个工作示例是的..可以使用bothI无法理解第一项1位于顶部的部分。它应该扩大到包含所需的尽可能多的垂直空间，但在任何情况下都不应缩小到50%以下；如果内容大于此值，则应滚动vertically@vals对不起，这句话用词很混乱。它的最小大小为50%，但只要不强制

item2

收缩，它就可以根据需要增长。同时，

item2

可以增长到50%。如果

item1

或

item2

的内容大于当前允许的空间，则应垂直滚动。现在清除得多！我将尝试找到一个解决方案，它在JSFIDLE中的行为正是我想要的。让它在应用程序中运行仍然存在一些问题，但这是因为一个混乱的布局需要修改。谢谢很高兴它帮助了你！这正是我在JSFIDLE中想要的行为。让它在应用程序中运行仍然存在一些问题，但这是因为一个混乱的布局需要修改。谢谢很高兴它帮助了你！