CODEWITHSUNDEEP
htmlcssflexbox
Gordon Freeman
Gordon Freeman

Reputation: 3421

Using full height in nested flex boxes does not work as expected

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>

I would like to stretch the section.right elements vertically if there is space left like in this tutorial. Position absolute is not an option, because if the right content needs more height it should result in growth of section.left also.

I've tried to set section.right to display: flex

jsfiddle

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

}

But it results in colliding the content. example

Upvotes: 0

Views: 59

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 372069

Although Safari 9 supports all standard flex properties (according to one source), with Safari 8 and older you'll need to use vendor prefixes.

For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer.

For flexbox browser support details see here: http://caniuse.com/#search=flexbox

Upvotes: 1

Related Questions