幅を設定中に水平スクロールバーを表示する：100％

Question

ブラウザの下にHTMLのように3つのDIV（左パネル、コンテンツ、右パネル）設定があります。

.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のdiv内のcalc機能を使用する必要があり、コンテンツのdivの内側に水平スクロールバーをしたい場合は

はその後のように、コンテンツ

.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

にスクロールバーを追加しますサガールは以下のように説明しました。

box div内のこの最小幅を気にしないで反応させたい場合は、私のソリューションを使用してください。

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; 
}