2017-12-31 52 views
4

Hier ist Deal, ich habe div s, die unter overflow: hidden platziert und müssen irgendwie verwalten, um sie zu zeigen.Zeige Elemente unter Überlauf: versteckt

.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>

Nach 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>

Der Grund, dass ich es diese Zeilen hinzugefügt Hinzufügen von Inhalten und verbergen Bildlaufleiste blättern. Mein Ziel ist es, "scrollbaren" Inhalt zu erstellen, die Bildlaufleiste zu verbergen und trotzdem gepunktete Rechtecke zu sehen. Wie kann ich das machen? (z-index hat nicht geholfen)

Antwort

0

Sie müssen eine von ihnen als absolut meiner Meinung nach positionieren.
Wenn Sie bereits flex mit dem übergeordneten verwenden, können Sie flex-direction:reverse verwenden, um den .main-container Stick rechts zu machen.

.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>

Verwandte Themen