Responsive Design: Middle page shrinks while sidebars stays the same - html

Question

I built a page that has 3 divs all lined up inline.
It basically goes SIDEBAR | Main Page | SIDEBAR
Now I have all of these wrapped in one div, I have it set so it's responsive. Currently, when I decrease the width of the page, it puts the left sidebar on top, the mainpage in the middle, and the right sidebar below them. I'd like for everything to stay together and just have the Main Page shrink to a certain amount and then stop (and just stop the responsiveness). How do I achieve this?
JSFiddle: https://jsfiddle.net/mnyd4tx8/
Code:
HTML
</div>
<div class="middlepage">
</div>
<div class="sidebar">
</div>
</div>
CSS
.pagewrap {
width:80%;
max-width: 600px;
min-width:200px;
height:1200px;
border:1px solid green;
margin:0 auto;
text-align: center;
}
.middlepage {
background-color: red;
width:80%;
max-width:200px;
min-width:100px;
height:1000px;
padding:10px;
text-align:center;
margin:0 auto;
display:inline-block;
vertical-align: top;
}
.sidebar {
display:inline-block;
width:100px;
height:100%;
background-color:black;
}

Answer 1

You can achieve the desired result with:
.pagewrap {
width:80%;
max-width: 600px;
min-width:400px;
height:1200px;
border:1px solid green;
margin:0 auto;
text-align: center;
}
.middlepage {
background-color: red;
width:60%;
max-width:200px;
min-width:100px;
height:1000px;
padding:10px;
text-align:center;
margin:0 auto;
display:inline-block;
vertical-align: top;
}
.sidebar {
display:inline-block;
width:20%;
max-width:100px;
height:100%;
background-color:black;
}
Notice the width on .sidebar is now using a percentage along with a max-width. Also, I made the width percentage on .middlepage smaller so everything contained in .pagewrap adds up to 100%.
Now, admittedly this isn't a 100% responsive solution, but your question leads me to believe there are some width constraints on your content.

Answer 2

Updated JSFiddle: https://jsfiddle.net/mnyd4tx8/1/
.pagewrap {
width:80%;
height:1200px;
border:1px solid green;
margin:0 auto;
text-align: center;
}
.middlepage {
background-color: red;
width:50%;
height:1000px;
padding:10px;
text-align:center;
margin:0 auto;
display:inline-block;
vertical-align: top;
}
.sidebar {
display:inline-block;
width:100px;
height:100%;
background-color:black;
}
It will work till certain point beyond that it will break as usual. In that case, you need to handle with CSS media query.