Question

考虑以下DOM分发。我有一个flexbox容器，其中有两个子容器，其中一个具有固定的大小，而另一个具有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>

我基本上想要的是图像在灵活的上下文中彼此“重叠”，这意味着可以在N种情况下使用的解决方案。

Answer 1

如果您未使用太多内联样式，则可能更清楚地解决了您的问题。我在您的代码中添加了类和CSS，以使其更易于阅读。

通过将flex-wrap:wrap;添加到该部分的display:flex;上，可以包装图像。我将图像设置为背景图像，并将bg尺寸设置为覆盖。如果希望第一个列出的图像显示第二个，只需切换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>

与嵌套元素（例如您的初始代码）一起使用的另一种想法是保持溢出可见且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>

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

2 个答案: