当我垂直收缩页面时，为什么H1会溢出我的容器

Question

我遇到了溢出文本的问题。我试图创建几个页面的投资组合，这将采取100%的用户的屏幕。一切都很简单，但我注意到，当我转到dev tools时，当我垂直缩小页面时，页面会变得狂野。元素开始溢出它们的容器..即使宽度还是可以的。我认为问题是每个页面上有100个vh，所以我删除了它，并使用html，body{height:100%，width:100%}，但这不是问题所在。

1#编辑:我可以看到如果我设置最小高度:300px，那么它就解决了这个问题，但是为什么我不能设置最小高度: 100%？我不想把一些随机的像素

jsfiddle：https://jsfiddle.net/7abd1pLr/1/

HTML

<div class="first-page">
        <header class = "header">
            <p>KONTAKT</p>
        </header>

        <main class = "main">
            <div class="portfolio">
                <p class="first-line">POR</p>
                <p class="second-line">TFO</p>
                <p class="third-line">LIO</p>
            </div>

            <div class= "blank"></div>
            <div class= "text">
                <h1>JOHN DOE</h1>
                <h2>ARCHITECTURE STUDENT</h2>
            </div>
            <!--<div class= "blank2"></div>-->
        </main>

        <footer class= "footer">
            <img src="images/mesto.svg" alt="" srcset="">
        </footer>

        <section class = "page-navigation">
            <button class="page-1 button-active"></button>
            <button class="page-2 "></button>
            <button class="page-3"></button>
        </section>
    </div>

    <div class="second-page">
        <div class="flex">
            <div class= "text-main flex">
                <div class="skills">
                    <h1>SKILLS</h1>
                    <div class="text-sub">
                        <p>Photoshop</p>
                        <p>Illustrator</p>
                        <p>InDesign</p>
                        <p>Rhino</p>
                        <p>SketchUp</p>
                        <p>Lumion</p>
                        <p>3D max</p>
                        <p>AutoCad</p>
                    </div>
                </div>
                <div class="education">
                    <h1>EDUCATION</h1>
                    <div class="text-sub">
                        <h2>some text</h2>
                        <p>some text</p>
                        <br>
                        <h2>some text</h2>
                        <p>some text</p>
                    </div>
                </div>
                <div class="experiences">
                    <h1>EXPERIENCES</h1>
                    <div class="text-sub">
                        <P>some text</P>
                        <p>some text</p>
                        <p>some text</p>
                    </div>
                </div>
                <div class="about-me">
                    <h1>ABOUT ME</h1>
                    <div class="text-sub">
                        <p>some textsome textsome textsome textsome textsome textsome textsome textsome textsome textsome text.
                        </p>

                    </div>
                </div>
            </div>
            <div class="profile-pic">
                <img src="images/.svg" alt="profile" srcset="">
            </div>
        </div>
    </div>

CSS

    .flex {
      display: flex; }


    html, body {
      height: 100%;
      width: 100%; }

    body {
      font-family: 'Roboto', sans-serif;
      line-height: 1.6;
      color: black;
      box-sizing: border-box;
      min-height: 100%;
      font-weight: 300; }


    .first-page {
      height: 100%;
      position: relative; }

      .first-page .main {
        display: flex;
        position: relative;
        top: 30%;
        justify-content: center;
        z-index: 2; }


    .second-page {
      position: relative;
      height: 100%;
      background-color: #DCDCDC; }

      .second-page .flex {
        position: relative;
        height: 100%;
        justify-content: flex-end; 
}
        .second-page .flex .text-main {
          height: 80%;
          min-height: 80%;
          align-self: flex-end;
          flex: 0 0 55%;
          flex-wrap: wrap; }

Answer 1

看起来是因为flex: 0 0 55%;中的55%在.second-page .flex .text-main中发生的