显示以下元素溢出：隐藏

Question

在此处，我div位于overflow: hidden以下，需要以某种方式设法展示它们。

＆＃13;

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

添加parent:: overflow: hidden, children:: overflow: scroll

之后

＆＃13;

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我添加了这些行以滚动内容并隐藏滚动条的原因。我的目标是制作＆＃34;可滚动＆＃34;内容，隐藏滚动条，仍然可以看到虚线矩形。我怎样才能做到这一点？ （z-index没有帮助）

Answer 1

在我看来，你需要将其中一个定位为绝对 如果您已将flex与父级一起使用，则可以使用flex-direction:reverse使.main-container向右移动。

＆＃13;

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;