CSS Flexbox 文本超出 div答案

【问题标题】：CSS Flexbox text is out of divCSS Flexbox 文本超出 div
【发布时间】：2014-08-14 17:50:25
【问题描述】：

我希望元素nav、#left 和#right 始终具有相同的高度，并且内部的文本始终位于元素中而不是外部。

<body>
    <header>
        text
    </header>
    <main>
    <nav>
        some links
    </nav>
    <section id="content">
       <div id="headline">
            Text
        </div>
         <div id="contentText">
            <div id="left">
                text
            </div>
            <div id="right">
                text
            </div>
        </div>
    </section>
    </main>
</body>

我的 CSS：

 header { 
        display: flex;
        height: 60px;
        width: 100%;
        background-color: green;
    }
    #logo{
        width: 15%;
        background-color: red;
    }
    #messages{
        width: 5%;
        background-color: yellow;
    }
    #notifications{
        width: 5%;
        background-color: red;
    }
    #search{
        width: 5%;
        background-color: yellow;
    }
    #searchArea{
        flex: 1;
        background: red;
    }
    #profileArea{
        width: 10%;
        background: yellow;
    }
    #options{
        width: 3%;
        background: red;
    }
    main{
        display: flex;
        width: 100%;
        height: calc(100% - 60px);
        min-height: calc(100% - 60px);
        background: blue;
    }
    nav { 
        width: 15%;
        min-height: 100%;
        background-color: green;
    }
    .link{
        width: 100%;
        height: 3%;
        background-color: yellow;
    }
    #content{
        display: flex;
        flex-direction: column;
        width: 85%;
        height: 100%;
        min-height: 100%;
        background: grey;
    }
    #headline{
        width: 100%;
        height: 5%;
        background-color: pink;
    }
    #contentText{
        display: flex;
        width: 100%;
        height: 95%;
        background: red;
    }
    #left{
        width: 50%;
        height: 100%;
        background: red;
    }
    #right{
        width: 50%;
        height: 100%;
        background: yellow;
    }

更多信息请查看我的JsFiddle

【问题讨论】：

问题中没有代码 = 糟糕糟糕糟糕！ :) 请添加一些 HTML/CSS，这样就可以在不使用 jsfiddle 的情况下复制问题（尽管 fiddle 是一个加号）
只是一个提示，如果你想在文本行之间有更大的间距，请避免使用大量的
并设置 CSS 属性 line-height: 3.0; 例如。

标签： html css flexbox

【解决方案1】：

去掉#contentText的高度应该是

#contentText{
    display: flex;
    width: 100%;

    background: red;
}
main{
    display: flex;
    background: blue;
}
nav { 
    width: 15%;
    background-color: green;   
    overflow:auto;
}

【讨论】：

是的，但现在我在 div 和 nav 下都有一点空间，但尺寸仍然不一样：/
广告导航 css 也检查

【解决方案2】：

你必须删除高度#contentText

#contentText{
    display: flex;
    width: 100%;
  /*height: 95%;*/
    background: red;
}

【讨论】：