css - DIV overflow:auto percentage width using content and not parent to set width -

i have div, such below, , following classes applied them. want wrapper div scroll when necessary , fit 100% of screen width. problem i'm seeing wrapper div, when set width: 100% using width of contents , not parent.

the wrapper div in question #pagecontent_headingswrapper. on smartphone's small viewport, width: 100% expanding outside of screen , making page large. don't know why.

any ideas?

also, want horizontal row of boxes in pagecontent_headings. in order inline-block elements in single horizontal line, have set width of pagecontent_headings 800 pixels, makes pagecontent_headingswrapper become same width, instead of parent.

<div id="pagecontentwrapper" class="default">     <div id="pagecontentwrappercell">         <div id="pagecontent_headingswrapper">             <div id="pagecontent_headings"></div>         </div>     <div id="pagecontent_content"></div> </div> </div> 

css large viewport:

#pagecontentwrapper.default {     display: none;  }  #pagecontentwrapper.show {      display: table;      height: 100%;     width: 100%;     color: black;      font-family: 'cloister black'; }  #pagecontentwrappercell {     display: table-cell;     position: relative;     height: 100%;     width: 100%;     vertical-align: middle;     text-align: center; }  #pagecontent_headingswrapper {     position: relative;     margin-bottom: -75px;     text-align: center;     border: red 1px solid; }  .pagecontent_headerbox {     display: inline-block;     height: 100px;     width: 150px;     background-color: white;     margin: 10px;     border: 2px #cccccc solid;     color: black;     cursor: hand;     cursor: pointer; }  .pagecontent_headerbox_selected {     display: inline-block;     height: 100px;     width: 150px;     background-color: black;     margin: 10px;     border: 2px white solid;     color: white;     cursor: hand;     cursor: pointer; }  .pagecontent_headerbox_label {     color: inherit;     font-size: 18pt;      margin: 0px;     padding: 0px; }  .pagecontent_headerbox_price {     color: inherit;     font-size: 14pt;     margin: 0px;     padding: 0px; }  #pagecontent_title {     width: 100%;      text-align: center;  }  #pagecontent_content {     padding: 10px;      display: block;      min-height: 500px;      width: 75%;      margin: 15px auto;      background-color: white;      color: black;      font-family: 'cloister black';     font-size: 14pt;     text-align: center;      padding-top: 50px; }  #pagecontent_content p {     margin: 0px;     padding: 0px; }  .pagecontent_text {     display: block;     opacity: 1;     position: relative;     margin-top: 5px; } 

css small viewport:

#pagecontent_wrapper.show {      margin-top: 30px;    }  #pagecontent_headingswrapper {     height: 100px;      min-height: 100px;     max-height: 100px;     width: 100%;     min-width: 200px;     max-width: 100%     text-align: center;      overflow: auto;   }  #pagecontent_headings {     min-width: 250px;     border: 1px green solid; }  .pagecontent_headerbox {     display: inline-block;     height: 100px;     width: 150px;     background-color: white;     margin: 10px;     border: 2px #cccccc solid;     color: black;     cursor: hand;     cursor: pointer;  }  .pagecontent_headerbox_selected {     display: inline-block;     height: 100px;     width: 150px;     background-color: black;     margin: 10px;     border: 2px white solid;     color: white;     cursor: hand;     cursor: pointer; } 

instead of width:100% use width:auto