Content breaking outside container (on mobile) when I use h-100 class

Question

Having trouble with some bootstrap 4.0. I am trying use h-100 so that the background extends to the bottom of the user's screen.

I've been messing around with clearfix, fluid-containers, etc to get it to work but no luck.
The problem is when a user visits that page on a mobile, the carousel breaks out of the container and over my footer making it look pretty terrible.

This only occurs when I am using h-100, with it removed there are no problems, but I would like to be able to use h-100 or an equivalent rather than a workaround like adding more content to the page.

<div class="text-white bg-secondary d-flex p-3 h-100">
    <div class="container-fluid">
      <div class="row">
        <div class="align-self-center text-center p-3 col-md-6">
          <h1 class="mb-4" style="font-size:325%;">Browse my work</h1>
          <p class="mb-4" style="font-size:135%;">I have done work with a non-profit in the past where I developed several of the main pages that are currently being used by the company. It also includes some past projects and mockups. To checkout the work with the nonprofit click the button
            below!</p>

          <a class="btn btn-outline-light btn-lg" href="https://community-alert.org/aboutUs.html" target="_blank">View my non-proft work! </a>
        </div>

        <div class="align-self-center col-md-6 p-0">
          <div data-ride="carousel" id="myCarousel" class="carousel slide w-100 d-flex">

            <!-- Indicators -->
            <div class="carousel-inner" role="listbox">

              <div class="carousel-item active">
                <img src="images/portfolio4.png" atl="first slide" class="d-block w-100"> </div>

              <div class="carousel-item">
                <img class="d-block w-100" src="images/portfolio5.png" data-holder-rendered="true"> </div>

              <div class="carousel-item">
                <img class="d-block w-100" src="images/portfolio8.png" data-holder-rendered="true"> </div>

            </div>

            <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
              <span class="carousel-control-prev-icon"></span>
              <span class="sr-only">Previous</span>
            </a>

            <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
              <span class="carousel-control-next-icon"></span>
              <span class="sr-only">Next</span>
            </a>

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

Answer 1

Seems to have been a tough question since everyone that I asked wasn't sure what to do. I just got done talking with a software engineering professional who showed me one solution to the problem so I am posting this to help anyone else that comes looking for an answer.

Answer: Basically, using h-100 would break the container whenever viewing the page on a mobile device, maybe strictly iOS because they can't hand render the h-100 properly. However, the reason I needed the h-100 was only to fill the background on large desktops because there wasn't enough content on the page for the footer to be below the screen upon load. NOTE: I only needed h-100 on desktops, so all we did was add an internal media query to get the screen width. If the screen was small enough, we didn't need h-100.

Here is the media query code:

<style>
  @media only screen and (min-width: 900px)
  {
    .myh-100
    {
      height: 100%;
    }
  }
</style>

PS - The style tags are there because I am containing this query in the head of the document.