Верхняя часть внутреннего элемента вырезана и недоступна при использовании комбинации css: position: fixed; `и` display: flex; ` - PullRequest
0 голосов
/ 11 апреля 2019

Я строю полноэкранный модальный режим и пытаюсь расположить содержимое по центру по вертикали, когда оно меньше экрана, и начать сверху и разрешить прокрутку, когда высота больше, чем высота контейнера. , Я пытаюсь использовать position:fixed, чтобы расположить контейнер на экране, и display:flex; align-items:center;, чтобы центрировать внутренний div. Когда контейнер короче внутреннего div, верхняя часть внутреннего div вырезается, даже когда я использую: overflow-y:scroll.

Вот мой код:

<div class="modal">
  <div class="inner-w">
      hello world 
      <div class="long-box">
    </div>
  </div>
</div>

.modal {
  position: fixed; 
  bottom: 70px; 
  top: 0; 
  left:0; 
  right: 0; 
  display: flex; 
  align-items: center; 
  padding: 15px; 
  overflow: scroll;
}
.inner-w {
  margin: 50px 0; 
  width: 100%; 
}
.long-box {
  height: 400px; 
  width: 100%; 
  border: 1px solid brown; 
}

вот jsfiddle: https://jsfiddle.net/benCarp/bh2Lfpo4/18/#&togetherjs=aKbe8NLJSR

Ответы [ 2 ]

1 голос
/ 11 апреля 2019

добавить в .modal {flex-direction-column;} теперь вы можете удалить поле

.modal {
  position: fixed; 
  bottom: 70px; 
  top: 0; 
  left:0; 
  right: 0; 
  display: flex; 
  flex-direction:column;
  align-items: center; 
  padding: 15px; 
  overflow: scroll;
}
.inner-w {
 
  width: 100%; 
}
.long-box {
  height: 400px; 
  width: 100%; 
  border: 1px solid brown; 
}
<div class="modal">
  <div class="inner-w">

      hello world 
      <div class="long-box">
      
    </div>
  </div>
</div>
0 голосов
/ 11 апреля 2019

@ Крестный отец отлично предложил изменить направление гибкого контейнера от строки к столбцу с помощью .modal{flex-direction-column;}. Он лучше описывает наш макет, а свойства width и margin больше не нужны. Однако этого недостаточно. Свойство overflow: scroll (или "auto") не наследуется и должно быть помещено в фактический переполняемый элемент - класс .inner-w.

Вот как должна выглядеть CSS:

.modal {
  position: fixed; 
  flex-direction:column;
  bottom: 70px; // kept for a button 
  top: 0; 
  left:0; 
  right: 0; 
  display: flex; 
  padding: 15px; 
  justify-content: center; 
}
.inner-w {
  overflow: auto;
}
.long-box {
  height: 400px; 
  width: 100%; 
  border: 1px solid brown; 
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...