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

Question

我正在混合使用 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;
}

我在这里创建了一个小提琴：http://jsfiddle.net/StephanTual/nu83c/9/

Answer 1

我已更改您的 HTML 以在我认为您希望设置为 200 像素的元素中包含一个类（不完全清楚）

<div class="full-height container">
    <div class="sectiona">
        <h4>Title for Section A</h4>

并将样式设置为

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

这似乎有效

demo

但是，在小提琴的其余部分中，您并不清楚您要获得什么。

至少在 Chrome 中，你需要设置所有的 flex 属性：

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

updated demo