All geek questions in one place

Display elements below overflow: hidden

In this case, I have one div, which is placed below overflow: hiddenand you need to somehow show them.

.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>
Run codeHide result

After adding 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>
Run codeHide result

The reason I added these lines is to scroll through the contents and hide the scroll bar. My goal here is to make the content scrollable, hide the scroll bar and still be able to see the dashed rectangles. How can i do this? ( z-indexdid not help)

+4
source share
1 answer

, . 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>
Hide result
0

Source: https://habr.com/ru/post/1691573/

More articles:


All Articles