以最小宽度“变成块”的流体元件

Question

I have a fixed size element, an image for example, that I want to display alongside an element that contains paragraphs describing it.

The result I want is that the paragraphs will be as wide as they need to be and will shrink if the container gets smaller. I want to impose a minimum width on the paragraphs so that when they reach that width and go smaller they will go down to the next line and essentially become a block element while the image will be centered in the line.

I also want this to happen without the use of media queries because each article could have a different sized image.

When I saw go to the next line I mean the paragraphs will appear below the image as if both the image and paragraphs were block elements.

http://jsfiddle.net/wu9ekLm4/

<article>
    <section class = "media"></section>
    <section class = "info">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </section>
</article>

article {
    border:1px solid black;
    padding:1px 0;
    text-align:center;
}

.media {
    background:orange;
    width:200px;
    height:200px;
    display:inline-block;
}

.info {
    background:yellow;
    padding:10px;
    margin:0;
    display:inline-block;
    vertical-align:top;
    min-width:200px;
}

This fiddle behaves how I want it to except for when you are shrinking the container. The paragraph will go to the next line as soon as the container becomes too small. What I want is for the paragraph to shrink with the container until the paragraph reaches 200px for example. Then it should go to the next line if the container goes any smaller.

Answer 1

You could do it with some max-width, min-width and calc. Try adding this to your .info class

.info{
    max-width: calc(100% - 250px);
    min-width: 200px;
}

Check it out here: http://jsfiddle.net/wu9ekLm4/1/