Переполнение обрезано, остальное содержимое видно - PullRequest
Новая
       17

Переполнение обрезано, остальное содержимое видно

0 голосов
/ 13 декабря 2018

Учитывая следующее распределение DOM.У меня есть контейнер flexbox с двумя дочерними элементами, один из которых имеет фиксированный размер, а другой сжимается с overflow: hidden.Мне было интересно, однако, есть ли способ, чтобы переполненный контент оставался видимым без какого-либо влияния на поток DOM.

Выделенный пример в 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 случаях.

Ответы [ 2 ]

0 голосов
/ 15 декабря 2018

Чтобы иметь перекрытие, вы должны либо использовать позиционированные элементы (что не является лучшим решением, если вы хотите сохранить элемент в потоке), либо использовать отрицательную маржу.

Давайте рассмотрим отрицательную маржу.Хитрость заключается в том, чтобы найти способ отрегулировать поля, чтобы создать перекрытие при уменьшении родительского контейнера.

Вот базовый пример: 

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>

Другая идея, которая работает с вложенным элементом (например, с исходным кодом), заключается в том, чтобы переполнение было видимым и заставило внешний элемент сжатьсяиспользуя 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>
0 голосов
/ 13 декабря 2018

Ваша проблема может быть более понятной, если вы не использовали слишком много встроенного стиля.Я добавил классы и CSS в ваш код, чтобы было легче читать.

При добавлении flex-wrap:wrap; к display:flex; в разделе изображения обертываются.Я установил изображения на background-images и 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>
...