html - 在嵌套的 flex 盒子中使用全高无法按预期工作

Question

jsfiddle

<div class="content">
    <section class="left">
        <h3>TITLE</h3>
        <div class="image">IMAGE</div>
        <article>TEXT</article>
    </section>
    <section class="right">
        <div>Lorem ipsum dolor sit.</div>
        <div>Laboriosam, nesciunt itaque aspernatur.</div>
        <div>In quia repellendus nemo!</div>
    </section>
</div>

如果有剩余空间，我想垂直拉伸(stretch) section.right 元素，如 tutorial . 绝对位置不是一个选项，因为如果右边的内容需要更高的高度，它也会导致 section.left 的增长。

我尝试将 section.right 设置为 display: flex

jsfiddle

section.right {
    background-color: #ccc;
    width: 40%;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;

}

但它会导致内容冲突。

Answer 1

尽管 Safari 9 支持所有标准 flex 属性 ( according to one source )，但对于 Safari 8 及更早版本，您需要使用供应商前缀。

要快速添加您需要的所有前缀，请在此处的左侧面板中发布您的 CSS:Autoprefixer .

有关 flexbox 浏览器支持的详细信息，请参见此处:http://caniuse.com/#search=flexbox