윈도우 크기를 조정할 때 특정 요소를 마지막으로 줄일 수 있습니까?

Question

Stackoverflow가하는 것과 같은 방식으로 실제로 작동하는 중앙 콘텐트 상자를 만들려고합니다. 사용자가 브라우저의 가장자리를 드래그하여 창 크기를 줄이면 여백 및 기타 요소가 완료 될 때까지 페이지의 주요 내용이 축소되지 않습니다.

<div class="navbar"> 
<div>Title</div> 
<a href="index.html">Home</a> 
<a href="filler1.html">filler1</a> 
<a href="filler2.html">filler2</a> 
</div> 


<div class="content"> 
testing123 
</div> 

을 그리고 내 CSS에 대한 :

그래서 난 내 HTML이이

body { 
margin:0; // Because I have a navigation bar at the top that wouldn't quite reach 
// the full length of the page 
margin-top: 100px; //to stop other elements covering the navigation. 
background-color: #ffffee 
} 

.content { 
background-color: white; 
overflow-wrap: break-word; 
border: 3px solid rgb(0, 0, 0); 
padding: 20px; 
position: relative; 
max-width: 1500px; 
min-width: 1500px; 
left: 100px; 
} 

감사합니다.

Answer 1

그냥에게 최대 폭을 제공하고 센터 :

.content { 
    ... 
    margin: 20px auto; 
    max-width: 400px; 
} 

Demo