Prevent child div from overflowing its parent container when resizing the page

Question

I've been trying to utilize the existing answers related to this issue on here, but none have resolved my problem.

I have a bootstrap 3 image carousel, within that carousel container, there is fixed text. The problem is when a shrink the browser page, the text overflows outside its parent. Ive added position: 'relative' on the container class ('container'), but the text still overflows. Any suggestions on how to prevent this?

css:

.container {
  position: relative;
}
.child-header {
  z-index: 2;
  width: 60%;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

the image carousel:

<div class="container">
    <div id="hero-slider" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#hero-slider" data-slide-to="0" class="active"></li>
          <li data-target="#hero-slider" data-slide-to="1"></li>
          <li data-target="#hero-slider" data-slide-to="2"></li>
        </ol>
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
          <div class="item active">
            <img class="hero-image" src="/assets/1.jpg">
          </div>
          <div class="item">
            <img class="hero-image" src="/assets/2.jpg">
          </div>
          <div class="item">
            <img class="hero-image" src="/assets/3.jpg">
          </div>
        </div>
    </div>
    <div class="child-header">
        <h1><i>Heading 1</i></h1>
        <h3>Some description here</h3>
    </div>
</div>

Answer 1

First your code is incorrect, you are missing a semicolon for top and transform, also you have a semicolon after } which is incorrect. Add position absolute to the header for absolute positioning in regard to the relative container.

.container {
  position: relative;
}
.child-header {
  z-index: 2;
  width: 60%;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

Answer 2

You could set .child-header to

.child-header {
    z-index: 2;
    width: 60%;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: contents;
}

or

.child-header {
    z-index: 2;
    width: 60%;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline;
}

Answer 3

隐藏溢出：

.child-header{overflow: hidden;}