Прокручиваемый текст в DIV неизвестного размера?

Question

У меня есть это:

<section>
  <div id="dont-scroll">
    Unknown content!
  </div>
  <div>
    <div id="scroll-this">
      This part should be scrollable when
      the total content overflows the SECTION
    </div>
  </div>
</section>

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

Я могу достичь это с помощью событий «resize», проверки размера SECTION и «dont-scroll» и т. д. c.

Однако есть ли сегодня более простой способ, используя только CSS?

Answer 1

Возможный подход с использованием Flexbox

body, html {
   margin: 0;
   padding: 0;
}

section {
   height: 100vh;
   display: flex;
   flex-flow: column nowrap;
}

section > div {
   padding: 20px;
}

div:not([id]) {
   background: #d8d8dc;
   flex: 1;
   overflow: auto;
}

<section>
  <div id="dont-scroll">
    Unknown content! <br />
    Lorem ipsum sit dolor amet
  </div>
  <div>
    <div id="scroll-this">
      This part should be scrollable when
      the total content overflows the SECTION
      <br /><br />
      
       <p>Lorem ipsum dolor sit amet,   
          consectetuer adipiscing elit. Donec 
          odio. Quisque volutpat mattis eros. 
          Nullam malesuada erat ut turpis. 
          Suspendisse urna nibh, viverra non, 
          semper suscipit, posuere a, pede.</p>

      ...


    </div>
  </div>
</section>

---

Пример использования codepen

Answer 2

Определение высоты scroll-this id и использование overflow-y: scroll сделает scroll-this id scroll способной

#scroll-this {
    height: 10px; //this can be as per your choice 
    overflow-y: scroll;
}

Я использовал 10px, потому что ваш контент слишком мал.

"Эту часть следует прокручивать, когда общее содержимое переполняет РАЗДЕЛ".

Прокрутка будет отображаться, только если содержание разрыва строки превышает заданную высоту.

Answer 3

#scroll-this {
  height: 20px;
  overflow-y: scroll;
}

<section style="width:200px">
  <div id="dont-scroll">
    Unknown content!
  </div>
  <div>
    <div id="scroll-this">
      This part should be scrollable when the total content overflows the SECTION
    </div>
  </div>
</section>