Css 在flexbox列中创建具有固定px高度的单个元素

我混合使用Flexbox和Bootstrap3来创建一个真正灵活的布局

然而，我遇到了一个难题，试图将flexbox布局中的“单元”保持在预定的px高度：

+---------------+
|  +---------+  |
|  |    a    |  |
|  +---------+  |      a: should always be 200px high, never smaller or taller
|  +---------+  |
|  |         |  |
|  |    b    |  |     
|  |         |  |          
|  |---------|  |
|  |         |  |  
|  |    c    |  |    b and c: should share the rest of the space (100% - 200px) 
|  |         |  |               equally between them (50% / 50%)
|  +---------+  |
+---------------+

我已尝试使用以下命令将a设置为div：

#fixedcont {
    height: 300px;
}

---

我在这里创建了一个fiddle:

我已经更改了您的HTML，在元素中包含了一个类，我认为您希望将该类设置为200px（不完全清楚）

这似乎有效

然而，在小提琴的其余部分中，并不清楚你想要得到什么

这意味着，至少在Chrome中，您需要设置所有flex属性：

.sectiona {
    flex-basis: 200px;
    flex-grow: 0;
    flex-shrink: 0;
    background-color: lightblue;
}

---

谢谢VAL，不幸的是这不起作用。我更新了提琴，以便更好地解释我想要实现的目标：简言之，A部分的高度应始终为200px，而B&C部分的剩余空间应平均分配。你说得对，至少在Chrome中不起作用，现在已修复！（我希望如此）

.sectiona {
    flex-basis: 200px;
    background-color: lightblue;
}

.sectiona {
    flex-basis: 200px;
    flex-grow: 0;
    flex-shrink: 0;
    background-color: lightblue;
}