在孩子的盒子大小中调整父母的大小

Question

有人可以帮助我调整父元素容器的大小（高度和宽度）（在我的情况下，将html元素的样式调整为孩子的身高和宽度），这是第一个表单中的另一个div（子表单）吗？ 我不希望减小父元素的大小来影响子元素。我希望子元素保持非常灵活，并且每次调整浏览器大小或使用移动设备时，父元素都可以调整子元素的高度和宽度。 下图与问题。

灰色区域应包裹绿色。

在我的html和CSS之下

html

 <div class="textFlexContainer">

             <div class="text-box">
                <h1 class="heading-primary">
                    <span class="heading-primary-main">City</span>   
                    <span class="heading-primary-sub">is where summer happens</span>   

                </h1>
              
                
                <form class="search-box" action="/search">
                  <input class="asdf" type="search" autocomplete="off" autocorrect="off" spellcheck="false"  required name="q" placeholder="Explore City">
                  
                    
                  <div class="search-page">
              
                    <h3>Explore City</h3>
                
              
                      <ul class="search-menu-list">
                
                      <li><a href="#">Our Daily Suggestions</a></li>
                      <li><a href="#">Shopping</a></li>
                      <li><a href="#">City Tours</a></li>
                      <li><a href="#">Restaurants</a></li>
                      <li><a href="#">Events</a></li>
                      <li><a href="#">Things to do</a></li>
                  
                    </ul>
                
              
                <h3>Recently Reviewed</h3>

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

                  

                </div> 

和我的CSS

.textFlexContainer{
  
    display:flex;
    align-self: center;
    
    
}

.heading-primary {
  color:#fff;
  text-transform: uppercase;
}

.heading-primary-main{

display: block;
font-size: 6rem;
font-weight: 400;
letter-spacing: 3.5rem;

}

.heading-primary-sub {

  display: block;
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 1.8rem;

}

.text-box {
 
  display: inline-block;
  text-align: center;

  margin: auto;
 
.search-box{
  display: block;
  position: relative;
  overflow: hidden;
  z-index:15;
  background-color: gray;
  
  
  
  
  
}
::placeholder {
  color:white;
}

.asdf {
  
  width: 80%;
  padding:2rem;
  border: none;
  outline: none;
  border-bottom:2px solid white;
  margin-top:2.5rem;
  font-size: inherit;
  background-color: transparent;
  
 
  color: #fff;
  
}

.asdf.visible{
  background-color:green;
}


h3{
  color:#fff;
  margin-top:2rem;
}

.search-page {


  height: fit-content;
  background-color:green;

 
  width: 80%;
 
  text-align: center;
  padding:4rem 0;

  transition: all 300ms ease-in-out;
 
  display: none;
  margin: 0 auto;
 
  
}

.search-page.visible {
  display: block;
  transition: all 300ms ease-in-out;
  
  
}


.search-page .search-menu-list{
display:flex;
flex-wrap: wrap;
  align-items: center;
  justify-content: center;
 

}

.search-page  .search-menu-list li{
  list-style: none;
}