親要素からはみ出してしまいます。

画面をスマホサイズにすると、.guide2-boxから.guide2-box-text-dtlのテキストが下にはみ出てしまいます。
画面を小さくすると文字が下に折り返しになって、その分親要素.guide2-boxの縦の長さが伸びるようにしたいのですが、どうしたら良いですか？
.guide2-boxにheight:auto;などを入れてみたりしたのですが、だめでした。
よろしくお願いします。

<div class="gu-box col-lg-6 p-3">
          <a href="#" class="guide2-box">
            <div>
              <img src="/img/type.png" class="guide2-box-img">
            </div>
            <div class="guide2-box-txt">
              <div class="guide2-box-text-ttl">
                <h1>タイトルタイトルタイトルタイトルタイトル</h1>
              </div>
              <div class="guide2-box-text-dtl">
                <p>説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明</p>
              </div>
            </div>
          </a>
        </div>

.guide2-box {
  background-color: white;
  border-radius: 8px;
  height: auto;
  display: flex;
  padding: 5px;
  border-right: solid 18px #ffc06e;
  box-shadow:0 2px 4px rgba(0,0,0,.28);
  flex-shrink: 0;
}

.guide2-box-img {
  height: 120px;
}
.guide2-box-txt {
  margin:0 10px;
}
.guide2-box-text-ttl h1{
  color: #0033cc;
  font-size:20px;
  font-weight: bold;
  margin-bottom:2px;
}
.guide2-box-text-dtl p{
  color: black;
  font-size:16px;
  font-weight: 600;
}
.guide2-box-text-dtl span{
  background: linear-gradient(transparent 50%, #a8ebffbc 50%);
}

【追記の画像】

guide2-box {
    background-color: white;
    border-radius: 8px;
    height: 136px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 5px;
    border-right: solid 18px #ffc06e;
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.28);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.28);
    -ms-flex-negative: 0;
    flex-shrink: 0;
}