固定高さのスクロール可能なコンテナでのオーバーフローの処理

Question

私はアプリで特定の機能に注釈を付けるようにしています。注釈はコンテンツの列の横に表示されます。列はカスタムスクロールバーで固定された高さなので、自動またはスクロールするにはオーバーフローyを、オーバーフローxを表示する必要があり、注釈が表示されます。

同じ要素にauto/visibleを設定することはできませんが、カラムがoverflow-y autoに設定され、ラッパーがオーバーフロー表示に設定されているので解決策を見ていますが、それを働かせることはできません。

私は私の現在の実装でJSBinを設定している - https://jsbin.com/woduciv/edit?html,css,output

を基本的に：

.wrapper { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
} 
.column { 
    position: fixed; 
    left: 0; 
    height: 100%; 
    width: 25%; 
    overflow: visible; 
} 
.column__content { 
    position: static; 
    overflow-y: scroll; 
    height: 100%; 
    width: 100%; 
} 

誰もが目に見えてx軸を持って解決策を知っている、とyのスクロールが有効になっていますか？

ありがとうございました:)

Answer 1

はこれを試してみてください：

body { 
 
    height: 100%; 
 
    margin: 0; 
 
    font-family: 'Unica One', sans-serif; 
 
    background: #fff; 
 
} 
 
.custom-panel { 
 
    border-radius: 0; 
 
    height: 300px; 
 
    overflow: scroll; 
 
    padding: 15px; 
 
    width: 400px; 
 
} 
 
.custom-panel p { 
 
    min-width: 500px; 
 
    width: 100%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> 
 
<div class="container"> 
 
\t \t <div class="col-sm-6"> 
 
\t \t \t <div class="panel custom-panel"> 
 
\t \t \t \t <p> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> 
 
\t \t \t </div> 
 
\t \t </div> 
 
</div>

ホープこれはあなたを助けます！