Как я могу иметь фиксированную ширину div внутри переменной ширины div без переполнения?

Question

У меня есть «обертка» div, скажем, ширина 80%, вокруг div, где я хочу ограничить ширину (например, форму) до 300 пикселей. Когда элементы управления настроены на «заполнение» ширины, элементы управления перекрывают «обертку» div. Я, очевидно, считаю это уродливым. Я знаю, что я могу установить атрибут переполнения, чтобы просто добавлять полосы прокрутки, но то, что я действительно хотел бы сделать, не ограничивает суба «обертки» сужением меньше его содержимого.

Answer 1

Дайте обертке в мин-ширина 300px по ширине после 80%

Answer 2

Похоже, вам нужно установить мин ширину на вашей обертку контейнера. Вот простой пример:

HTML:

<div class="wrapper"> 
    <form> 
     <input type="text"> 
     <input type="text"> 
      <button type="submit">Save</button> 
    </form> 
</div> 

CSS:

.wrapper { 
    width: 80%; 
    min-width: 300px; /*This should be at least as wide as your form, wider if you need extra room */ 
    position: relative; 
} 

form { 
    width: 300px; 
} 

input { 
    width: 100%; 
} 

Я создал простой jsfiddle, чтобы продемонстрировать: http://jsfiddle.net/MhxVz/