溢出剪辑，其余内容可见

Question

考虑以下 DOM 分布。我有一个带有两个孩子的flexbox 容器，其中一个具有固定大小，而另一个则缩小为overflow: hidden。但是，我想知道是否有办法让溢出的内容保持可见而不影响 DOM 的流动。

Fleshed out Example at Codepen

ul.current {
  list-style: none;
  display: flex;
  width: 40%;
  margin: 0 auto;
}

li {
  overflow: hidden;
}

li:last-child {
  flex-shrink: 0;
}

li div {
  border: 1px solid black;
  background: green;
  width: 10rem;
  height: 10rem;
}
li:last-child {
  margin-top: 2rem;
}
li:last-child div {
  background: red;
}


/* GOAL */
section {
  margin: 0 auto;
  width: 40%;
}
.item {
  position: absolute;
}
.item:last-child {
  margin-top: 2rem;
  margin-left: 5rem;
}

.content {
  border: 1px solid black;
  background: green;
  width: 10rem;
  height: 10rem;  
}

.item:last-child .content {
  background: red;
}

<h3>Shrink the viewport to get an idea of what's the intended scenario</h3>

<ul class="current">
  <li><div></div></li>
  <li><div></div></li>
</ul>

<h3>Visual representation of the overlap behavior</h3>
<section>
  <div class="item"><div class="content"></div></div>
  <div class="item"><div class="content"></div></div>
</section>

基本上，我想要的是让图像在灵活的上下文中相互“重叠”，意思是一种适用于 N 种情况的解决方案。

Answer 1

如果您没有使用那么多内联样式，您的问题可能更容易解决。我在您的代码中添加了类和 css 以使其更易于阅读。

通过将flex-wrap:wrap; 添加到该部分的display:flex;，图像会换行。我将图像设置为背景图像，并将 bg-size 设置为覆盖。如果您希望第一个列出的图像显示第二个，只需切换 div。

希望对你有帮助

#imagedisp {
  display: flex;
  flex-wrap: wrap;
}

#div1 {
  flex-shrink: 1;
  /*  overflow: hidden;*/
  border: 1px dashed;
  background-image: url("https://s3-media4.fl.yelpcdn.com/bphoto/xFlymSQW0weBqXjwZM6Y2Q/ls.jpg");
}

#div2 {
  margin-bottom: 40px;
  border: 1px dashed;
  background-image: url("https://s3-media3.fl.yelpcdn.com/bphoto/_-U30Zk2XbUKe2fcdtEXLQ/o.jpg");
}

#div1,
#div2 {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

div {
  min-width: 300px;
  /*width:300px;*/
  height: 100px;
}

<section id="imagedisp">
  <div id="div1">
    <!-- <img />-->
  </div>
  <div id="div2">
    <!-- <img />-->
  </div>
</section>

Answer 2

为了有重叠，您必须使用定位元素（如果您想保持元素流动，这不是最佳解决方案）或使用负边距。

让我们考虑负边距。诀窍是找到一种方法来调整边距，以便在父容器缩小时创建重叠。

这是一个基本的例子：

section {
  max-width: 300px;
  border: 1px solid;
  animation:change 2s linear infinite alternate;
}
@keyframes change {
  from {max-width: 300px;}
  to {max-width: 100px;}
}

.item{
  height: 80px;
  min-width: 80px;
  background:blue;
  display: inline-block;
  vertical-align:top;
  margin-right:calc((100% - 200px)/2);
}

.item:last-child {
  margin-top: 2rem;
  background: red;
}

<section>
  <div class="item">
  </div>
  <div class="item">
  </div>
</section>

如您所见，技巧是根据容器的宽度（100%）定义边距，我们将有两种情况：

1. 当宽度大于Xpx 时，我们有一个正边距和正常的间距行为
2. 当宽度小于Xpx时，我们将有一个负边距，并且会有重叠效果而不换行。

我们需要简单地找到定义边距的好方法，以获得所需的行为。如果我们想要不同的行为，比如没有边距然后重叠，我们也可以考虑媒体查询：

section {
  border: 1px solid;
  font-size:0;
}

.item{
  height: 80px;
  min-width: 80px;
  background:blue;
  display: inline-block;
  vertical-align:top;
}

.item:nth-child(odd) {
  margin-top: 2rem;
  background: red;
}
@media all and (max-width:350px) {
  .item{
    margin-right:calc((100% - 320px)/4)
  }
}

<section>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
</section>

---

另一个使用嵌套元素（如您的初始代码）的想法是保持溢出可见和force the outer element to shrink using min-width:0.

ul.current {
  list-style: none;
  display: flex;
  width: 40%;
  margin: 0 auto;
  animation:change 2s infinite linear alternate;
}
@keyframes change {
   from {width:100%}
   to {width:40%}
}

li {
  min-width:0;
}

li div {
  border: 1px solid black;
  background: green;
  width: 10rem;
  height: 10rem;
}
li:nth-child(odd) {
  margin-top: 2rem;
}
li:nth-child(odd) div {
  background: red;
}


/* GOAL */
section {
  margin: 0 auto;
  width: 40%;
}
.item {
  position: absolute;
}
.item:last-child {
  margin-top: 2rem;
  margin-left: 5rem;
}

.content {
  border: 1px solid black;
  background: green;
  width: 10rem;
  height: 10rem;  
}

.item:last-child .content {
  background: red;
}

<ul class="current">
  <li><div></div></li>
  <li><div></div></li>
  <li><div></div></li>
  <li><div></div></li>
</ul>