オーバーフローの下に要素を表示する：hidden

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

あなたは私の意見で絶対的なものの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>