Отображение горизонтальной полосы прокрутки при заданной ширине: 100%

Question

У меня есть 3 DIVs (левая панель, содержание, правая панель) в браузере, как в HTML ниже.

Класс .content установлен на 100% ширину для использования при доке и отстыковать левую панель и правую панель. До сих пор все работает хорошо.

Проблема заключается в том, что .content имеет несколько элементов, они делают в нижней части браузера горизонтальную полосу прокрутки.

Вместо того, чтобы показывать горизонтальную полосу прокрутки в нижней части браузера, пожалуйста, назовите меня, как сделать это в .content DIV, чтобы в браузере была видна панель .left-panel, .content и .right-panel. Благодаря!

Fiddle

HTML

<div class="table"> 
    <div> 
     <div class="left-panel"><p>Left Panel</p><p>Left Panel</p><p>Left Panel</p><p>Left Panel</p><p>Left Panel</p><p>Left Panel</p><p>Left Panel</p> 
     </div> 
    </div> 
    <div class="content"> 
     <div style="width:100%; background:#ccc; display: inline-flex"> 
      <div class="box">&nbsp;</div><div class="box">&nbsp;</div><div class="box">&nbsp;</div><div class="box">&nbsp;</div><div class="box">&nbsp;</div><div class="box">&nbsp;</div><div class="box">&nbsp;</div><div class="box">&nbsp;</div><div class="box">&nbsp;</div> 
     </div> 
     <div style="border:1px solid red;position:absolute;bottom:0">ddddd 
     </div> 
    </div> 
    <div > 
     <div class="right-panel"><p>Right Panel</p><p>Right Panel</p><p>Right Panel</p><p>Right Panel</p><p>Right Panel</p><p>Right Panel</p><p>Right Panel</p><p>Right Panel</p></div> 
    </div> 
</div> 

CSS

.table > div{ 
display: table-cell; 
} 
.content{ 
position:relative; 
width:100%; border:1px solid red; 
overflow: auto; 
} 
.left-panel, .right-panel{ 
width:200px; 
border:1px solid black; 
height:100%; 
overflow:auto; 
} 

.box { 
width: 300px; 
border: solid 1px red; 
height: 100px; 
} 

Answer 1

Я обновил свой CSS.

обновляется левая панель, правая панель,

ширина содержимого не рассчитывается с известково()

и дать края слева к контенту.

затем добавить полосы прокрутки к содержимому

.content{ 
 
position: relative; 
 
    width: calc(100% - 388px); 
 
    border: 1px solid red; 
 
    overflow: auto; 
 
    display: inline-block; 
 
    margin-left: 193px; 
 
    margin-top: -8px; 
 
    height: 100vh; 
 
    overflow-x: auto; 
 
} 
 
.left-panel{ 
 
    left:0; 
 
} 
 
.right-panel{ 
 
    right:0; 
 
} 
 
.left-panel, .right-panel{ 
 
    width: 200px; 
 
    border: 1px solid black; 
 
    height: 100%; 
 
    overflow: auto; 
 
    position: absolute; 
 
    top: 0; 
 
} 
 

 
.box { 
 
min-width: 300px; 
 
border: solid 1px red; 
 
height: 100px; 
 
}

<div> 
 

 
\t \t <div class="left-panel"><p>Left Panel</p><p>Left Panel</p><p>Left Panel</p><p>Left Panel</p><p>Left Panel</p><p>Left Panel</p><p>Left Panel</p> 
 
\t \t </div> 
 

 
    <div class="content"> 
 
\t \t <div style="width:100%; background:#ccc; display: inline-flex"> 
 
\t \t \t <div class="box">&nbsp;</div><div class="box">&nbsp;</div><div class="box">&nbsp;</div><div class="box">&nbsp;</div><div class="box">&nbsp;</div><div class="box">&nbsp;</div><div class="box">&nbsp;</div><div class="box">&nbsp;</div><div class="box">&nbsp;</div> 
 
\t \t </div> 
 
\t \t <div style="border:1px solid red;position:absolute;bottom:0">ddddd 
 
\t \t </div> 
 
\t </div> 
 

 
\t \t <div class="right-panel"><p>Right Panel</p><p>Right Panel</p><p>Right Panel</p><p>Right Panel</p><p>Right Panel</p><p>Right Panel</p><p>Right Panel</p><p>Right Panel</p></div> 
 

 
</div>

http://jsfiddle.net/byx2d460/27/

Answer 2

Если вы хотите горизонтальную полосу прокрутки внутри DIV контента, вы должны использовать функцию известково внутри content DIV, как Сагар объяснил ниже.

Если вы хотите сделать его отзывчивым и не заботитесь об этой минимальной ширине внутри box, используйте мое решение.

http://jsfiddle.net/byx2d460/30/

.content{ 
position:relative; 
width:100%; 
border:1px solid red; 
overflow: auto; 
} 
.left-panel, .right-panel{ 
width:200px; 
border:1px solid black; 
height:100%; 
overflow:auto; 
} 

.box { 
width: 11%; 
border: solid 1px red; 
height: 100px; 
}