溢出被剪掉，其余内容可见

Question

考虑以下 DOM 分布。我有一个 flexbox 容器，其中有两个 children，其中一个具有固定大小，而另一个收缩 overflow: hidden。但是，我想知道是否有一种方法可以让溢出的内容保持可见而不会对 DOM.

的流程产生任何影响

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>

基本上，我想要的是让图像在灵活的上下文中相互 "overlap"，也就是说，一个适用于 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%) 定义边距，我们将有两种情况：

当宽度大于 Xpx 时，我们有一个正边距和一个带有间距
当宽度小于 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>

另一个使用嵌套元素（比如你的初始代码）的想法是保持溢出可见并且

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>

溢出被剪掉，其余内容可见

Overflow clipped, rest of the content visible

html

css

overflow

flexbox