min-width take precedence over max-width?

Question

Is there a way to have the child div start with the defined min-width and then as I add content to that child div, the div will expand till it reaches the max-width? As is, the child div automatically starts out with its max width.

jsfiddle: http://jsfiddle.net/QMf22/

css:

#main{
    width:500px;
    min-height:250px;
    background-color: #33363b;
    border-radius: 10px;
    margin: 1% auto;
    overflow: hidden;
} 


#content{
    min-width: 237.5px;
    max-width:490px;
    min-height: 237.5px;
    background-color: white;
    margin: 1% auto;
    border-radius: 10px;
    position: relative;
    cursor: pointer;
}

html:

<div id="main">
    <div id="content"></div>
</div>

Answer 1

<div> is a block element, and it will wrap it's width equal to it's parent, so your elements won't get the min-width nor max-width style if the parent container width is bigger or smaller then what you set respectively.

to make the element width depend on the content, you need to use an inline element or change the CSS display for the div to an inline element, using

display: inline-block

here's the updated FIDDLE

UPDATE

if you want to make it in the center, just add CSS

text-align: center;

inside it's container ( #main in your case ), here's the example in FIDDLE