Остановить Div от сокращения до содержимого в макете жидкости

Question

У меня есть центрированный div (#content) на моем адаптивном сайте, размер которого изменяется в окне браузера, например:

<div id="container">
  <div id="content">
    <p>Here is some sample text.</p>
  </div>
</div>

#container {
  width: 100%;
}

#content {
  max-width: 805px;
}

Это работает, за исключением случаев, когда вещи внутри #content не занимает достаточно горизонтального пространства, чтобы вытолкнуть ширину div на максимальную ширину, которую я установил. Например, вместо 805 пикселей одна из моих страниц с небольшим содержимым между тегами абзаца имеет размер 740 пикселей.

Я пробовал добавлять width: 100% в #content, но это останавливает div от изменения размера.

Какой лучший способ это исправить? Нужно ли использовать медиа-запрос?

Answer 1

Я нашел ответ. Мне нужно width: 100%но мне тоже нужно было box-sizing: border-box, а затем мне нужно было добавить добавленную ширину моего отступа в max-width, вот так:

#content {
  box-sizing: border-box;
  width: 100%;
  max-width: 885px;
  padding: 40px;
}