Question

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

然而，我试图在预定的px高度保持Flexbox布局中的“单元格”时碰到一点砖墙：

+---------------+
|  +---------+  |
|  |    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%)
|  +---------+  |
+---------------+

我试图用：

设置一个div

#fixedcont {
    height: 300px;
}

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

Answer 1

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

<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

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

1 个答案: