summernote dropdown-menu overflow

Question

私は2つのdiv内に異なるマージンを設定しています。左側の列には、datetimepickerとsummernoteというブートストラップがあります。

datetimepickerダイアログが内部divの外側にオーバーフローするのがわかりますが、summernoteのドロップダウンでどのように達成できますか？出来ますか？

はここで問題と私の遊び場です：https://jsfiddle.net/SycoLTH/2j0ykbgf/

<style> 
form { 
    height: 100%; 
    width: 100%; 
} 

#out-container { 
    background-color: #000000; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    display: flex; 
} 

#in-container { 
    background-color: #FFFFFF; 
    width: 100%; 
    height: 100%; 
    max-height: 80%; 
    max-width: 70%; 
    margin: auto; 
    padding: 3%; 
} 

#column-left, 
#column-right { 
    height: 100%; 
    width: 50%; 
    overflow: auto; 
} 
</style> 

<script type="text/javascript"> 
$(".datetimepicker").datetimepicker({ 
    showClear: true, 
    showTodayButton: true 
}); 

$(".summernote").summernote({ 
    theme: "simplex", 
    disableDragAndDrop: true, 
    shortcuts: false, 
    toolbar: [ 
    ["style", ["bold", "italic", "underline", "clear"]], 
    ["misc", ["undo", "redo"]], 
    ["font", ["strikethrough", "superscript", "subscript"]], 
    ["fontsize", ["fontsize"]], 
    ["color", ["color"]], 
    ["para", ["ul", "ol", "paragraph"]], 
    ["insert", ["picture", "link", "video", "table", "hr"]], 
    ["height", ["height"]] 
    ] 
}); 
</script> 

<div id="out-container"> 
    <div id="in-container"> 
    <form> 
     <div id="column-left" class="pull-left"> 
     Some text 
     <br> Some text 
     <br> Some text 
     <br> Some text 
     <br> Some text 
     <br> Some text 
     <br> 
     </div> 
     <div id="column-right" class="pull-left"> 
     Date: 
     <br> 
     <input type="text" class="datetimepicker form-control" /> 
     <br> 
     <br> Text: 
     <br> 
     <textarea class="summernote"></textarea> 
     </div> 
    </form> 
    </div> 
</div> 

Answer 1

position: absoluteオブジェクトは、その最も近いposition: relativeオブジェクトのバインドによってトリミングされています。この場合、境界上にsummernote popoversを表示する最も簡単な方法は、右の列を以下のように設定してみてください。

#column-right { 
    overflow:visible; 
} 

参考：http://front-back.com/how-to-make-absolute-positioned-elements-overlap-their-overflow-hidden-parent