css - сжать элемент вместо всей страницы

Question

У меня есть страница с 2 делами. Поскольку я уменьшаю высоту окна браузера, я хочу, чтобы первый div уменьшался (и на нем появлялись полосы прокрутки), в то время как второй div должен сохранять его высоту.

Возможно ли реализовать эту логику с помощью чистого CSS?

<div class="shrinkit">
  ..many lines of text..
</div>
<div class="noscroll">
  ..many lines of text..
</div>
<style>
.shrinkit {
  background-color: blue;
}
.noscroll {
  background-color: green;
}
</style>

Answer 1

Просто дайте первый div height:auto; и второму div, укажите желаемую высоту, например height:200px

Answer 2

Ты можешь использовать flexbox

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.shrinkit {
  background-color: blue;
  overflow: auto;
  flex: 1 1;
  height: 50%;
}

.noscroll {
  background-color: green;
  height:50%;
}

<div class="shrinkit">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque ad natus distinctio praesentium voluptate tenetur beatae, mollitia, nesciunt illum ipsum magni ratione repellat reiciendis in error itaque minus aliquam earum!
  </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque ad natus distinctio praesentium voluptate tenetur beatae, mollitia, nesciunt illum ipsum magni ratione repellat reiciendis in error itaque minus aliquam earum!
  </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque ad natus distinctio praesentium voluptate tenetur beatae, mollitia, nesciunt illum ipsum magni ratione repellat reiciendis in error itaque minus aliquam earum!
  </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque ad natus distinctio praesentium voluptate tenetur beatae, mollitia, nesciunt illum ipsum magni ratione repellat reiciendis in error itaque minus aliquam earum!
  </p>
</div>
<div class="noscroll">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque ad natus distinctio praesentium voluptate tenetur beatae, mollitia, nesciunt illum ipsum magni ratione repellat reiciendis in error itaque minus aliquam earum!
  </p>
</div>

играть на скрипке