How to show an indication if an element exceeds the size of its parent using CSS?

Question

Say I have a div .parentthat contains another div .child. Can I, and if so, how do I show the reading (i.e., Icon) when it .childexceeds the width .parentusing CSS?

I completed my task using jQuery (see example below), but I am looking for a CSS-only solution, as I try to minimize the use of jQuery.

Note: div .childhas dynamic width.

Another note: I prefer not to edit the contents of divs

var x = $('.child').offset().left + $('.child').width();

var y = $('.parent').offset().left + $('.parent').width();

if (x > y) {

  var z = x - y;

  $('.child')
    .append($('<div></div>')
      .css('left', z - 10)
      .css('position', 'absolute')
      .css('top', $('.child').height() / 2 - 10)
      .text('>'));

}

.parent {
  position: relative;
  border: 1px solid #000;
  height: 200px;
  width: 200px;
  overflow: hidden;
}
.child {
  position: absolute;
  top: 40px;
  border: 1px solid red;
  height: 100px;
  width: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="parent">
  <div class="child">
    Some text
  </div>
</div>

Run codeHide result

Answer 1

. . , , - javascript.

:)

10 .

, webkit. .

.parent {
  position: relative;
  border: 1px solid #000;
  height: 200px;
  width: 200px;
  overflow:auto;
}

.child {
  position: absolute;
  top: 40px;
  border: 1px solid red;
  height: 100px;
  width: 400px;
}

.parent1 {
  position: relative;
  border: 1px solid #000;
  height: 200px;
  width: 200px;
  overflow:auto;
}

.child1 {
  position: absolute;
  top: 40px;
  border: 1px solid red;
  height: 400px;
  width: 100px;
}

::-webkit-scrollbar {
      background: transparent;
}


::-webkit-scrollbar-button:horizontal:end  {
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid transparent;
    border-left:8px solid red; 
}

::-webkit-scrollbar-button:vertical:end  {
    border-left: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top:8px solid blue; 
}

<div class="parent">
  <div class="child">
    Some text
  </div>
</div>

<div class="parent1">
  <div class="child1">
    Some text
  </div>
</div>

Hide result