Add border only when content is overflowing

Question

Wondering if it is possible to add border only when the content is overflowing.

I will try to explain what I mean. Let's say I have a window 200px*200px I have another window with red background inside that 200px*100px Meaning the bottom part of the window is let's say blue background.

I add overflow-y:auto to the red window. Red window has currently text inside that is filling the 200*100 window perfectly. Now I am adding extra lines of text, so that the red window is now scrollable. So what I am trying to do is that when the red window becomes scrollable I want to have a border appear between red and blue window.

.firstBox {
  width: 200px;
  height: 100px;
  background: #FFA07A;
  overflow-y: auto;
  border-bottom: 5px solid red;
  /*  I want the border-bottom ONLY when the text overflows */
}

.secondBox {
  width: 200px;
  height: 100px;
  background: #89CFF0;
}

<div class="bigBox">
  <div class="firstBox">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis placerat dapibus ipsum. Sed egestas tortor in ultrices euismod. Sed laoreet bibendum tincidunt. Donec id hendrerit tellus. Nulla aliquet libero volutpat odio consequat fringilla. Maecenas aliquam,
      enim at elementum maximus, sem metus semper leo, sit amet cursus orci quam euismod justo. Suspendisse mattis magna nisl, nec dictum nisi commodo ut. Maecenas accumsan leo justo, id commodo mi posuere non. In vitae pellentesque mi, quis molestie
      velit.
    </p>
  </div>
  <div class="secondBox">

  </div>
</div>

Also see on JSFiddle: https://jsfiddle.net/zs4f2j9n/

Answer 1

Here is a trick using sticky position. The idea is to have a pseudo element that will cover all the area minus a small part at the bottom then we use a sticky element that will be hidden behind and will only appear at the bottom and will stick there on the scroll:

.first {
  width: 200px;
  height: 200px;
  background: #FFA07A;
  display: inline-block;
}

.second {
  background: #89CFF0;
  height: 100px;
  overflow: auto;
  position: relative;
  z-index: 0;
}

.second::after {
  content: "";
  display: block;
  position: sticky;
  z-index: -2;
  bottom: 0;
  height: 5px;
  background: #000;
}

.second::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 5px;
  background: inherit;
}

<div class="first">
  <div class="second">
    lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum
  </div>
</div>
<div class="first">
  <div class="second">
    lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum
  </div>
</div>

If you want the border to take all the width and behave like a border-bottom you can add an extra wrapper:

.first {
  width: 200px;
  height: 200px;
  background: #FFA07A;
  display: inline-block;
  vertical-align:top;
}

.second {
  background: #89CFF0;
  height: 100px;
  position: relative;
  z-index: 0;
}
.second p {
  overflow: auto;
  max-height:100%;
  margin:0;
}

.second::after {
  content: "";
  display: block;
  position: sticky;
  z-index: -2;
  bottom: 0;
  height: 5px;
  background: #000;
}

.second::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; /*no need to consider the space in this case*/
  background: inherit;
}

<div class="first">
  <div class="second">
    <p>lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum</p>
  </div>
</div>
<div class="first">
  <div class="second">
   <p> lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum lorem pisum</p>
  </div>
</div>