CSS min-width свойство не работает

У меня следующая проблема:
У меня есть div, содержащий другие элементы, и я пытаюсь сделать его ширину зависимой от содержимого. Я также ограничиваю максимальную ширину этого div. Я использую min-width и max-width в CSS, но кажется, что min-width не работает. Ширина div всегда является значением max-width, независимо от содержимого.

Пример:

Я хотел бы, чтобы белый div (это основной div, о котором я говорил) строго вокруг формы, находящейся в нем, без пустых мест слева и справа. Я дал стиль формы max-width:500px, чтобы показать, что даже если контент небольшой, основной div остается прежним.

HTML

<div class="gInnerBox sInnerBoxMain">
    <form style="max-width:500px; margin-left: auto; margin-right: auto">            
        <div id='content'>
                   <!-- CONTENT -->
        </div>
    </form>
</div>

CSS

.gInnerBox{
    position: relative;
    background-color: #fff;
    opacity: 0.9;
    padding: 10px 10px 10px 10px;    

    box-shadow: -5px -5px 20px #000, 5px 5px 20px #000;
    -moz-box-shadow: -5px -5px 20px #000, 5px 5px 20px #000;
    -webkit-box-shadow: -5px -5px 20px #000, 5px 5px 20px #000;

    border: 1px solid #000;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
}

.sInnerBoxMain{
    max-width: 1000px;
    min-width: 500px;
    margin-left: auto;
    margin-right: auto;
    top: 50px;
}

Example
(источник: wstaw.org)

Ответы

Ответ 1

По умолчанию элемент уровня блока расширяется, чтобы заполнить максимально возможную ширину. Таким образом, его ширина в основном равна "100%", и вы говорите, что максимум 1000 пикселей, поэтому он расширяется до максимума 1000 пикселей. Минимальная ширина все еще достигается (она не менее 500 пикселей). Попробуйте установить display: inline-block для элемента и посмотрите, поможет ли это вам. Это должно заставить его расширяться только до его содержимого, при этом обращая внимание на минимальную и максимальную ширину. Возможно, вам придется добавить прерыватель <br/> после того, как остальная часть вашего контента адаптируется к нему, будучи встроенным.