我使用FlexBoxes构建了一个树视图,但我无法在Chrome中使用该布局.溢出不起作用并破坏布局.
在Firefox / IE / Edge中,下面的代码片段可以正常工作,因为我想要溢出.
它在Firefox中运行的屏幕:
但是在Chrome中,它会在此处的代码段中显示它.如何让溢出像在FF / IE中一样工作?
/* WorkPackage Treeview */
.flex-tree,.flex-tree2,.flex-tree-content,.flex-tree-content2,.flex-tree-bottom,.flex-tree-parent,.flex-tree-children,.flex-tree-child-button {
display: -ms-flexBox;
display: -webkit-flex;
display: flex;
}
.flex-tree,.flex-tree-parent {
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.flex-tree {
min-width: 240px;
max-width: 245px;
min-height: 180px;
max-height: 180px;
position: absolute;
border-style: solid;
border-width: 1px;
z-index: 100;
}
.flex-tree2 {
min-width: 240px;
max-width: 245px;
min-height: 380px;
max-height: 380px;
position: absolute;
border-style: solid;
border-width: 1px;
z-index: 100;
}
.flex-tree-content {
min-height: 150px;
max-height: 150px;
background-color: White;
border-bottom-style: solid;
border-bottom-width: 1px;
overflow-y: scroll;
}
.flex-tree-content2 {
min-height: 350px;
max-height: 350px;
background-color: White;
border-bottom-style: solid;
border-bottom-width: 1px;
overflow-y: scroll;
}
.flex-tree-bottom {
align-items: center;
justify-content: center;
min-height: 30px;
max-height: 32px;
background-color: Gray;
border-bottom-style: solid;
border-bottom-width: 1px;
}
.flex-tree-parent {
margin-left: 20px;
}
.flex-tree-parent>.flex-tree-children:first-child {
margin-left: 7px;
}
.flex-tree-children {
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
margin: 3px;
margin-left: 27px;
min-width: 101px;
max-width: 101px;
min-height: 20px;
min-height: 20px;
}
.flex-tree-content>.flex-tree-children:first-child {
margin-top: 15px;
margin-left: 7px;
}
.flex-tree-content2>.flex-tree-children:first-child {
margin-top: 15px;
margin-left: 7px;
}
.flex-tree-child-button {
width: 16px;
height: 16px;
background-image: url('https://cdn2.iconfinder.com/data/icons/bwpx/icons/toggle_minus.gif');
background-repeat: no-repeat;
cursor: pointer;
order: 2;
}
.flex-tree-child {
text-align: center;
width: 80px;
height: 20px;
background-color: GreenYellow;
border-style: solid;
border-width: 1px;
color: black;
margin-left: 5px;
order: 1;
}
.flex-tree-close {
line-height: 7px;
width: 75px;
height: 25px;
cursor: pointer;
margin: 3px;
}