При прокрутке Div исчезает отступ

Question

У меня есть сайт со следующей структурой:

    <div class="main-outer">
     <div class="main-inner">
      <div class="test"> 
        components
      </div>
     </div>
    </div>

, где div 'test' вызывает различные компоненты.

Я пытаюсь сделать он реагирует на высоту, поэтому, если компоненты имеют высоту: 100%, они должны расти по мере роста экрана. Однако, если я установлю минимальную высоту в компонентах, с этой высоты должен появиться свиток (из main-external div ).

Моя проблема : Когда экран достигает этой минимальной высоты, нижний отступ (или поле), который я установил в 'main-inner class' , исчезает ... Как я могу обойти эту проблему?

У меня есть пример здесь: https://jsfiddle.net/4o1j2zmn/1/

Редактировать : мне нужно поле в более высоком div, чем «тестовый», потому что, как я называю многие компоненты, я хочу сделать маржу глобальной

Answer 1

Я проверил ваш код, я думаю, что ".main-external" заполнение работает нормально. Это проблема в поле «.main-inner» и фиксированной высоте класса «.test». Я переместил ваше свойство margin из класса ".main-inner" в класс ".test" и сделал автоматическую высоту ".test", чтобы оно корректировалось в соответствии с содержимым, а также показывало поле от внешнего края родительского контейнера. Пожалуйста, проверьте и попробуйте ниже фрагмент:

.main-outer {
  padding: 0 50px;
  height:100vh;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: blue;
}

.main-inner {
  height: 100%;
  box-sizing: border-box;
}

.test{
      display: block;
    content: '';
    height: auto;
    background-color: red;
    margin: 50px 0 50px 0;
}

    <div class="main-outer">
      <div class="main-inner">
        <div class="test">
          http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ 
        </div>
      </div>
    </div>