Div with video element and unexpected scrollbar

Question

In my app a div containing a video element should be as high as the parent and not show a vertical scrollbar. Sizing is done as follows:

• outermost div set to viewport height
• subsequent divs are set to 50% or 100% of parent height using bootstrap sizing utilities

The innermost div containing the video element has a scrollHeight larger than the clientHeight. Why is that and how can I get rid of the vertical scrollbar?

Fiddle: https://jsfiddle.net/holger_grzonka/r781dmay/2/

HTML

<!-- limit outermost div to viewport height -->
<div id="screen-height">
  <div class="container-fluid h-50">
    <div class="row h-100">
      <div class="col-sm-4 col-xl-2 h-100" id="file-list-div">
        <ul class="list-group h-100">
          <li class="list-group-item">Link 1</li>
        </ul>
      </div>

      <!-- div with vertical scrollbar, even though styled as overflow outo -->
      <div class="col-sm-8 col-xl-10 h-100" id="video-div">
        <video controls autoplay class="h-100">
          <source src="https://cdn.videvo.net/videvo_files/video/free/2021-04/large_watermarked/210329_06B_Bali_1080p_013_preview.mp4" type="video/mp4">
        </video>
      </div>

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

Answer 1

Set the vertical-align property to top for the video element.