问题是这样的,在flex面局中的一个div,在y方向上,超出时要显示滚动条,在x方向上,因为结构就会有超出,通过定位,让部分内容显示在div外,所以在x向上是超出显示也显示,但不显示滚会条的。
父div的css:
.node-list-warp {
flex-grow: 2;
width: 100%;
background-color: #F2F2F2;
margin: 0;
padding: 0;
overflow-y: auto;
height: 0;
overflow-x: visible;
}
.node-item{
display: flex;
flex-direction: row;
height: 28px;
align-items: center;
font-size: 14px;
}
.node-icon{
width:8px;
border-radius: 4px 0 0 4px;
position: relative;
left:-10px;
height: 24px;
}
.node-title-line{
content: "";
top:0;
left:-10px;
width:2px;
height: 100%;
position: relative;
box-shadow: -2px 0 4px rgba(0, 0, 0, .6);
z-index: 1;
}
.node-title{
flex-grow: 1;
}
html结构
<div class="node-list-warp">
<div class="node-item">
<div class="node-icon" style="background-color: blueviolet;"></div>
<span class="node-title-line" style="background-color: blueviolet;"></span>
<div class="node-title">开始</div>
</div>
</div>
当我的node-item很多时,会显示Y向的滚动条,但是我的node-item里的node-icon与node-title-line是通过定位超出了node-list-warp的,它们不显示了,请问是哪里出了问题?
自己在做一些htmlcss,感觉坑好多呀!
继续向上级的元素找 overflow 属性,
估计是其他的作隐藏,
虽然感觉你的样式非常奇怪
再次看了一下,你直接在 .node-list-warp 增加before 或者 after 的伪类就好了
伪类,position:absolute; wrap 增加 position:relative
可以得到位于滚动容器右侧的装饰,如果期望高度 = 有效数据量,伪类绑定到 item
剩下的 icon和 title 直接用 width: 8px,width: calc(100% - 8px); 或者计算好的固定宽度
如果期望中间的间距,title 直接增加 text-indent,
优先不使用 margin 和 left ,保证元素在盒模型的位置可以查到,对你这样后期的维护比较好