div显示滚动条的问题

Question

问题是这样的，在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，感觉坑好多呀！

Answer 1

继续向上级的元素找 overflow 属性，
估计是其他的作隐藏，
虽然感觉你的样式非常奇怪

// 滚动容器的 height 为什么设置为 0 ？
.node-list-warp {
    height: 0;
}

// relative, 主要放父级作为定位的坐标系那种
// 配合的 left 属性什么，直接用 margin 替换就好了
// content 主要是 :before, :after 伪类的内容
.node-title-line{
    top:0;
    position: relative;
    content: "";
}

再次看了一下，你直接在 .node-list-warp 增加before 或者 after 的伪类就好了
伪类，position:absolute; wrap 增加 position:relative
可以得到位于滚动容器右侧的装饰，如果期望高度 = 有效数据量，伪类绑定到 item
剩下的 icon和 title 直接用 width: 8px，width: calc(100% - 8px); 或者计算好的固定宽度
如果期望中间的间距，title 直接增加 text-indent，
优先不使用 margin 和 left ，保证元素在盒模型的位置可以查到，对你这样后期的维护比较好