Flexbox 问题 - div 垂直溢出父元素

Question

所以我正在为不存在的游戏做一个登录页面练习，这就是我遇到的问题。 hero-row div 溢出了它的 header-box 容器，因为它本身被它的内容溢出了 header-box 包含 2 行：nav-row 和 hero-row。它们显示为 flex 项目，并且它们本身在内部使用 flex 布局。该问题似乎与图像的填充有关 azamat-icon。请帮我解决这个问题，因为这会使 hero-row 的内容下沉到低于需要的水平，并且 header-box 比屏幕高度大，尽管有 heigth: 100vh。 Screenshot

这部分项目的代码：

.header-box {
    background-color: grey;
    color: black;
    margin: 0 auto;
    height: 100vh;
}

/************* Nav Bar **************/
.nav-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 6rem;
}
.nav-ul {
    font-family: 'bold';
    list-style: none;
    display: flex;
}
.nav-item {
    margin-left: 7rem;
    cursor: pointer;
}

/************* Nav Bar **************/


/************* Logo **************/

.logo {
    font-family: 'scbold';
    font-size: 2rem;
    cursor: pointer;
}

/************* Logo **************/

/******************* Hero Starts ************************/

.hero-row {
    font-family: 'bold';
    display: flex;
    width: 100%;
    overflow: hidden;
}
.hero-content {
    flex: 0 0 50%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: 0 5%;
    max-height: inherit;
}
.hero-azamat {
    flex: 0 0 50%;
    overflow: hidden;
    padding: 10%;
    max-height: inherit;
}
.azamat-icon {
    width: 100%;
}
.hero-description {
    font-size: 1.5rem;
    padding-right: 25%;
    margin: 5% 0 10%;
    letter-spacing: 0.01rem;
}

<header>

    <div class="header-box">

      <nav class="nav-row">
        <h1 class="logo">LOGO</h1>
        <ul class="nav-ul">
          <li class="nav-item">About</li>
          <li class="nav-item">Merch</li>
          <li class="nav-item">Purchase</li>
        </ul>
      </nav>

      <div class="hero-row">

        <div class="hero-content">
          <h1 class="hero-heading">
            Start your adventure!
          </h1>
          <p class="hero-description">
            The game is so good and tasty mmm you should definitely try it out baby come on oh i love Freddie Mercury btw
          </p>
          <button class="hero-btn">Buy Now!</button>
        </div>
        
        <div class="hero-azamat">
          <img src="images4-1648549_8-bit-mario-png-mario-8-bit-png.png" alt="" class="azamat-icon">
        </div>
  
      </div>
      
    </div>

  </header>

如您所见，我已经尝试了一些方法来解决这个问题 overflow: hidden，但是没有用。

Answer 1

改变一下

  .header-box {
    height: 100%;
     min-height:100vh;
   }

HTML

 <header>
    
        <div class="header-box">
    
          <nav class="nav-row">
            <h1 class="logo">LOGO</h1>
            <ul class="nav-ul">
              <li class="nav-item">About</li>
              <li class="nav-item">Merch</li>
              <li class="nav-item">Purchase</li>
            </ul>
          </nav>
    
          <div class="hero-row">
    
            <div class="hero-content">
              <h1 class="hero-heading">
                Start your adventure!
              </h1>
              <p class="hero-description">
                The game is so good and tasty mmm you should definitely try it out baby come on oh i love Freddie Mercury btw
              </p>
              <button class="hero-btn">Buy Now!</button>
            </div>
            <div class="hero-azamat">    
            </div>
          </div>
        </div>
      </header>

CSS

.header-box {
    background-color: grey;
    color: black;
    margin: 0 auto;
    height: 100%;
}

/************* Nav Bar **************/
.nav-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 6rem;
}
.nav-ul {
    font-family: 'bold';
    list-style: none;
    display: flex;
}
.nav-item {
    margin-left: 7rem;
    cursor: pointer;
}

/************* Nav Bar **************/


/************* Logo **************/

.logo {
    font-family: 'scbold';
    font-size: 2rem;
    cursor: pointer;
}

/************* Logo **************/

/******************* Hero Starts ************************/

.hero-row {
    font-family: 'bold';
    display: flex;
    width: 100%;
    overflow: hidden;
}
.hero-content {
    flex: 0 0 50%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: 0 5%;
    max-height: inherit;
}
.hero-azamat {
    flex: 0 0 50%;
    overflow: hidden;
    padding: 10%;
    max-height: inherit;
    background:red;
}
.azamat-icon {
    width: 100%;
}
.hero-description {
    font-size: 1.5rem;
    padding-right: 25%;
    margin: 5% 0 10%;
    letter-spacing: 0.01rem;
}

jsfiddle

Flexbox 问题 - div 垂直溢出父元素

Flexbox issue - divs vertically overflow parent element

html

css

layout

overflow

flexbox