Блог

Главная - Вопросы по программированию - Переполнение-x-это прокрутка, а переполнение-y-наложение одновременно

Переполнение-x-это прокрутка, а переполнение-y-наложение одновременно

#html #css

Вопрос:

Представьте, что у меня есть контейнер

 .container {
  width: 400px;
  
  display: flex;
  align-items: flex-start;
  /* overflow-x: hidden; */
  overflow-y: overlay;
  
  max-height: 47px;
}

.item {
  white-space: nowrap;
  padding: 3px;
  margin: 3px;
  background: #dadada;
} 
 <div class="container">
  <div class="item special">
    CONTENT #1
    <div>
      Additional Content
    </div>
  </div>
  <div class="item">CONTENT #2</div>
  <div class="item">CONTENT #3</div>
  <div class="item">CONTENT #4</div>
  <div class="item">CONTENT #5</div>
  <div class="item">CONTENT #6</div>
  <div class="item">CONTENT #7</div>
</div>

Все, что я хочу, чтобы первый элемент с дополнительным содержимым был наложен на прокручиваемый контейнер. Я бы хотел получить что-то подобное:

введите описание изображения здесь

Возможно ли это с помощью чистого CSS?

пс. В будущем это должно быть показано и скрыто, вот почему мне нужна такая странная вещь.

Ответ №1:

Я надеюсь, что этот фрагмент может дать вам какой-то намек на то, как решить вашу проблему.

 .container {
  width: 400px;
  display: flex;
  align-items: flex-start;
  /*overflow-x: hidden;*/
  overflow-y: overlay;
  
  max-height: 47px;
}

.item {
  white-space: nowrap;
  padding: 3px;
  margin: 3px;
  background: #dadada;
}

.item.special{
     min-height: 100px;
     position: relative;
     overflow: visible;
} 
 <div class="container">
  <div class="item special">
    CONTENT #1
    <div>
      Additional Content
    </div>
  </div>
 <div class="container">
  <div class="item">CONTENT #2</div>
  <div class="item">CONTENT #3</div>
  <div class="item">CONTENT #4</div>
  <div class="item">CONTENT #5</div>
  <div class="item">CONTENT #6</div>
  <div class="item">CONTENT #7</div>
</div></div>

Комментарии:

1. Этот элемент с дополнительным содержимым может находиться в середине списка. Конечно, чтобы развернуть и показать дополнительный контент, я могу удалить его из контейнера и добавить перед контейнером. Но это не будет выглядеть достаточно гладко.

Метки: ,