我正在使用flexbox显示两列:
当左栏中的内容发生变化时,右栏会向左移动以重叠滚动条和左栏的一部分。
没有看到任何其他浏览器,我认为这是一个错误,但任何关于如何修复而不抛弃flexbox-direction:行的想法将非常感激。
HTML
<div class="container">
<div class="left" onclick="revealtext()">
click me
<div id="display-text" style="display:none">
left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left
</div>
</div>
<div class="middle">
middle
</div>
</div>
CSS
.container {
background: blue;
display: flex;
display: -ms-flexbox;
flex-direction: row;
-ms-flex-direction: row;
height: 200px;
width: 600px;
}
.left {
background: darkgray;
flex: 0 0 200px;
-ms-flex: 0 0 200px;
border-right: 5px solid red;
overflow-y: auto;
height: 200px;
width: 200px;
}
.middle {
background: gray;
flex: 0 0 400px;
-ms-flex: 0 0 400px;
overflow-y: auto;
border-left: 5px solid green;
height: 200px;
width: 400px;
}
JS
revealtext = function() {
var el = document.getElementById('display-text');
if (el.style.display == 'block')
el.style.display = 'none';
else
el.style.display = 'block';
}