CSS响应式div防止 overflow hidden

Question

我将此布局用于保持纵横比的响应式 div。它运行良好，但它需要 overflow: hidden，要清楚它是在 :after 中定义的 padding-top: 56.25%。如果包装器上没有溢出，则下一个元素(在本例中为 href 链接)将被阻止。

我的问题是:有没有办法在包装器上没有 overflow: hidden 的情况下实现相同的结果？我需要一些元素在不被切断的情况下在包装外可见。

如果您在小窗口中看不到问题，请在整页中打开代码段。

#wrapper {
  position: relative;
  max-width: 1000px;
  min-width: 350px;
  max-height: 383px;
  border: 1px solid;
  /*overflow:hidden;*/
}

#wrapper:after {
  padding-top: 56.25%;
  display: block;
  content: '';
  background: rgba(0,0,0,.25);
}

<div id="wrapper"></div>
<a href="#">click me</a>

Answer 1

您可以添加一个内部 div 并像以前一样使用伪元素使其响应，然后在其上应用 overflow: hidden;。然后添加另一个同级 div 并设置您希望应用的样式，在示例中为 div #test，如您所见，它将在包装器外部可见。

#wrapper {
  position: relative;
  max-width: 1000px;
  border: 1px solid;
}

#inner {
  min-width: 350px;
  max-height: 383px;
  overflow: hidden;
}

#inner:after {
  background: rgba(0,0,0,.25);
  padding-top: 56.25%;
  display: block;
  content: '';
}

#test {
  position: absolute;
  right: 0;
  bottom: 0;
  transform: translateY(100%);
  width: 100px;
  height: 50px;
  background: aqua;
}

<div id="wrapper">
  <div id="inner"></div>
  <div id="test"></div>
</div>
<a href="#">click me</a>