오버플로 아래에 요소 표시 : 숨김

Question

여기에 거래가 있는데, div은 overflow: hidden 아래에 있으며 어떻게 든 표시 할 수 있습니다.

.body { 
 
    display:flex; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.main-container { 
 
    background-color: #eee; 
 
    width: 560px; 
 
    height: 500px; 
 
} 
 

 
.sidebar-container { 
 
    width: 270px; 
 
    height: 100px; 
 
} 
 

 
.sidebar-container_hidden-scroll { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.sidebar-element { 
 
    width: 250px; 
 
    height: 44px; 
 
    position: relative; 
 
    box-sizing: border-box; 
 
    margin: 10px 5px; 
 
    padding: 5px; 
 
    border: 1px solid red 
 
} 
 

 
.sidebar-element__linked-div { 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 500px; 
 
    border: 1px dotted red; 
 
    top: 0px; 
 
    left: calc(250px + 30px); 
 
}

<div class="body"> 
 
    <div class="sidebar-container"> 
 
    <div class="sidebar-container_hidden-scroll"> 
 

 
     <div class="sidebar-element"> 
 
     <div class="sidebar-element__linked-div"></div> 
 
     <div class="sidebar-element__name"> 
 
      Yellow flower 
 
     </div> 
 
     <div className="sidebar-element__capacity"> 
 
      10 kg 
 
     </div> 
 
     </div> 
 
     <div class="sidebar-element"> 
 
     <div class="sidebar-element__linked-div"></div> 
 
     <div class="sidebar-element__name"> 
 
      Yellow flower 
 
     </div> 
 
     <div className="sidebar-element__capacity"> 
 
      10 kg 
 
     </div> 
 
     </div> 
 
     <div class="sidebar-element"> 
 
     <div class="sidebar-element__linked-div"></div> 
 
     <div class="sidebar-element__name"> 
 
      Yellow flower 
 
     </div> 
 
     <div className="sidebar-element__capacity"> 
 
      10 kg 
 
     </div> 
 
     </div> 
 
     <div class="sidebar-element"> 
 
     <div class="sidebar-element__linked-div"></div> 
 
     <div class="sidebar-element__name"> 
 
      Yellow flower 
 
     </div> 
 
     <div className="sidebar-element__capacity"> 
 
      10 kg 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
    <div class="main-container"> 
 

 
    </div> 
 
</div>

parent:: overflow: hidden, children:: overflow: scroll

.body { 
 
    display:flex; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.main-container { 
 
    background-color: #eee; 
 
    width: 560px; 
 
    height: 500px; 
 
} 
 

 
.sidebar-container { 
 
    width: 270px; 
 
    height: 100px; 
 
    overflow-y: hidden; 
 
    overflow-x: hidden; 
 
} 
 

 
.sidebar-container_hidden-scroll { 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow-x: hidden; 
 
    overflow-y: scroll; 
 
    padding-right: 20px; 
 
} 
 

 
.sidebar-element { 
 
    width: 250px; 
 
    height: 44px; 
 
    position: relative; 
 
    box-sizing: border-box; 
 
    margin: 10px 5px; 
 
    padding: 5px; 
 
    border: 1px solid red 
 
} 
 

 
.sidebar-element__linked-div { 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 500px; 
 
    border: 1px dotted red; 
 
    top: 0px; 
 
    left: calc(250px + 30px); 
 
}

<div class="body"> 
 
    <div class="sidebar-container"> 
 
    <div class="sidebar-container_hidden-scroll"> 
 

 
     <div class="sidebar-element"> 
 
     <div class="sidebar-element__linked-div"></div> 
 
     <div class="sidebar-element__name"> 
 
      Yellow flower 
 
     </div> 
 
     <div className="sidebar-element__capacity"> 
 
      10 kg 
 
     </div> 
 
     </div> 
 
     <div class="sidebar-element"> 
 
     <div class="sidebar-element__linked-div"></div> 
 
     <div class="sidebar-element__name"> 
 
      Yellow flower 
 
     </div> 
 
     <div className="sidebar-element__capacity"> 
 
      10 kg 
 
     </div> 
 
     </div> 
 
     <div class="sidebar-element"> 
 
     <div class="sidebar-element__linked-div"></div> 
 
     <div class="sidebar-element__name"> 
 
      Yellow flower 
 
     </div> 
 
     <div className="sidebar-element__capacity"> 
 
      10 kg 
 
     </div> 
 
     </div> 
 
     <div class="sidebar-element"> 
 
     <div class="sidebar-element__linked-div"></div> 
 
     <div class="sidebar-element__name"> 
 
      Yellow flower 
 
     </div> 
 
     <div className="sidebar-element__capacity"> 
 
      10 kg 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
    <div class="main-container"> 
 

 
    </div> 
 
</div>

나는 그것이 내용과 숨기기 스크롤 막대를 스크롤 할 수있어 그 라인을 추가하는 이유를 추가 한 후. 여기 내 목표는 "스크롤 가능한"컨텐츠를 만들고, 스크롤바를 숨기고, 점선 된 사각형을 볼 수있게하는 것입니다. 어떻게해야합니까? (z-index 도움 안됨)

Answer 1

내 견해로는 그 중 하나를 절대 위치로 지정해야합니다.
이미 부모와 함께 flex을 사용하고 있다면 flex-direction:reverse을 사용하여 .main-container을 오른쪽으로 고정시킬 수 있습니다.

.body { 
 
    display:flex; 
 
    flex-direction: row-reverse; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.main-container { 
 
    background-color: #eee; 
 
    width: 560px; 
 
    height: 500px; 
 
} 
 

 
.sidebar-container { 
 
    width: 100%; 
 
    height: 100px; 
 
    overflow-y: hidden; 
 
    overflow-x: hidden; 
 
    position:absolute; 
 
    left: 0; 
 
} 
 

 
.sidebar-container_hidden-scroll { 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow-x: hidden; 
 
    overflow-y: scroll; 
 
    padding-right: 20px; 
 
} 
 

 
.sidebar-element { 
 
    width: 250px; 
 
    height: 44px; 
 
    position: relative; 
 
    box-sizing: border-box; 
 
    margin: 10px 5px; 
 
    padding: 5px; 
 
    border: 1px solid red 
 
} 
 

 
.sidebar-element__linked-div { 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 500px; 
 
    border: 1px dotted red; 
 
    top: 0px; 
 
    left: calc(250px + 30px); 
 
}

<div class="body"> 
 
    <div class="sidebar-container"> 
 
    <div class="sidebar-container_hidden-scroll"> 
 

 
     <div class="sidebar-element"> 
 
     <div class="sidebar-element__linked-div"></div> 
 
     <div class="sidebar-element__name"> 
 
      Yellow flower 
 
     </div> 
 
     <div className="sidebar-element__capacity"> 
 
      10 kg 
 
     </div> 
 
     </div> 
 
     <div class="sidebar-element"> 
 
     <div class="sidebar-element__linked-div"></div> 
 
     <div class="sidebar-element__name"> 
 
      Yellow flower 
 
     </div> 
 
     <div className="sidebar-element__capacity"> 
 
      10 kg 
 
     </div> 
 
     </div> 
 
     <div class="sidebar-element"> 
 
     <div class="sidebar-element__linked-div"></div> 
 
     <div class="sidebar-element__name"> 
 
      Yellow flower 
 
     </div> 
 
     <div className="sidebar-element__capacity"> 
 
      10 kg 
 
     </div> 
 
     </div> 
 
     <div class="sidebar-element"> 
 
     <div class="sidebar-element__linked-div"></div> 
 
     <div class="sidebar-element__name"> 
 
      Yellow flower 
 
     </div> 
 
     <div className="sidebar-element__capacity"> 
 
      10 kg 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
    <div class="main-container"> 
 

 
    </div> 
 
</div>