Issues with flexbox layout using div

Question

I've added an image of what I'm trying to achieve. The existing code is in the jsfiffle link below.

I'm trying to turn the <div class="grid 6 cheese_people_r"> into a flex box, it has two items inside it, The items in the flex box should be the image and the text. I would like the image on the right and the text on the left, they should be spaced so the text can be read and the image displays at a decent size. I've got to this point, but seem to have hot a wall. Any help welcome.

Please see jsfiddle for example

http://jsfiddle.net/UQSN4/4/

    <div class="grid 6 cheese_people_r">
        <li><img id="cheese_people_r" src="img/cheese_owner.jpg"><li>
        <li><p>The Big Cheese Owner <br/>  Sally Fiffle <br/> &ldquo;I wanted to create an online store that I'd would trust. This has been done by our amazing staff and the products they produce. Nothing can replace dedication and pasion.&rdquo;</p><li>
    </div>

Answer 1

Well, you wanted something with flex box, so here you are.

I did write it from scratch, though, so your classes/ids are not present.

Version 1: Does work in Firefox and Chrome, but due to lack of intrinsic width support in Safari/IE/Opera (non-chromium), won't display correctly there.

<ul>
    <li><img src="http://s15.postimg.org/vl0o8vobf/cheese_owner.jpg"/></li>
    <li><h2>The Big Cheese Owner</h2>
        <h3>Sally Fiffle</h3>
        <p>&ldquo;I wanted to create an online store that I'd would trust. This has been done by our amazing staff and the products they produce. Nothing can replace dedication and pasion.&rdquo;</p>
    </li>
</ul>

And some CSS

ul, li {
    margin: 0;
    padding: 0;
    color: #524c43;
}
ul {
    border: 2px solid #524c43;
    -webkit-border-radius: 50px 0px 0px 50px;
    border-radius: 50px 0px 0px 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         7px 7px 5px rgba(50, 50, 50, 0.75);
}
li {
    display: block;
    line-height: 1.27;
    padding: 5px;
    margin: 0;
    list-style-type: none;
    min-width: -webkit-min-content;
    min-width: -moz-min-content;
    min-width: min-content;
}
li img {
    display: block;
    -webkit-border-radius: 50px 0px 0px 50px;
    border-radius: 50px 0px 0px 50px;
}

Version 2: Using explicit widths, so it will at least look somewhat OK across browsers. Not as flexible, though.

<ul>
    <li style="max-width: 200px;"><img src="http://s15.postimg.org/vl0o8vobf/cheese_owner.jpg"/></li>
    <li style="max-width: 300px;"><h2>The Big Cheese Owner</h2>
        <h3>Sally Fiffle</h3>
        <p>&ldquo;I wanted to create an online store that I'd would trust. This has been done by our amazing staff and the products they produce. Nothing can replace dedication and pasion.&rdquo;</p>
    </li>
</ul>

CSS is the same.

Version 3 (which I recommend): Just don't flex boxes while the cross-browser support still isn't really there yet and use the hurt-free float version of @Itay.

Answer 2

jsFiddle Demo

.cheese_people_r {
    width: 600px;
    overflow: hidden;
}

#cheese_people_r {
    float: left;
    margin: 10px;
}