可调整大小：调整 div 的大小小于内容并使其可滚动

Question

我有 2 个 div 需要左右调整大小（并填满彼此的空间）。 当 div 变得太小而不适合其内容时，它们需要变得可滚动。我的问题是：当设置可调整大小内的内容宽度时，例如。 canvas width='200' ，可调整大小的 div 不会调整为小于画布的大小。 这是小提琴：fiddle

我已经看过这里了： Making a div scrollable inside a resizeable container div

并在内容周围包裹另一个 div : .inner 并将其设置为 width :inherit

.inner{width:inherit;  }

    .pane {
    display: table-cell;
    width: auto;`enter code here`
    overflow:auto;
}
.left.pane {
   background-color: olivedrab; 
}


.right.pane {
    background-color: orange;  
}
canvas{width:200px ; border:solid 1px red}

我也尝试了以下方法，但它仅在左窗格宽度未使用前“固定”时才有效：

resize: function(e, ui) {
           var dif= ui.originalSize.width - ui.size.width;
            console.log(dif +'   '+ ui.originalSize.width);
          var oldWidth= $(".right.pane").width();
            $(".right.pane").width( oldWidth + dif);
        }

对强也有反应，用起来很不爽。

我认为我应该能够以某种方式覆盖可调整大小的大小不会小于内容的规则。（我无法调整内容的宽度，它们应该只是可滚动的）

我尝试了以下方法：但没有奏效

.inner{width:auto; min-width:inherit; max-width:inherit;  or 0% 100% respectively}

使左右 div 都可调整大小也不起作用 + 会留下不必要的间隙。

如何将窗格调整为小于其内容的大小，并使窗格可滚动。

非常感谢您的帮助。 珍妮塔

Answer 1

我让滚动条出现在两个 div 上：DEMO 我将画布设为 100% 宽度，并将 div.left.pane 设为 .inner 的父级

HTML

<div class="wrapper">
<div class="header">
 header    
</div>
   <div class="inner-wrapper">
      <div class='left pane'> <div class="inner"><pre>  Left
 bla bla bla bla bla bla bla bla bla bla bla bla bal

  bla bla bla bla bla bla bla bla bla bla bla bla bal

  bla bla bla bla bla bla bla bla bla bla bla bla bal
  bla bla bla bla bla bla bla bla bla bla bla bla bal
           </pre>    
       </div> </div>

       <div class="right pane">Right
       <div class='inner'> 
           <canvas > </canvas>
       </div>
       </div> 
       </div>

      <div class="footer">
  Footer  
</div>   
</div>

CSS

.wrapper {
display: table;
 height:75%;
 width:90%;
    background-color: red;
}

.header {
    height: 5%;
    background-color: moccasin;  
}
.inner-wrapper{
display: table;
    overflow:auto;
width: 100%;
    height: 90%;
}

.pane {
    display: table-cell;
    width: auto;
    overflow:auto;
}
.left.pane {
   background-color: olivedrab; 
}
.inner{width:auto; min-width:inherit; max-width:inherit;}

.right.pane {
    background-color: orange;  
}
canvas{width:100% ; border:solid 1px red}
.footer {
    height: 5%;
    background-color: moccasin;  
}