我正在尝试创建一个顶部有可选横幅的页面，以及一个带有详细信息的可滚动主视图。
这是一个插件：
https://plnkr.co/edit/RxVw5RJVhQInhXV0AtWn?p=preview
这在Chrome和Safari中效果很好。但是在Firefox中，横幅是可滚动的，您必须在屏幕上滚动横幅以查看主视图中的剩余内容。
我可以使用固定的高度和偏移来使其工作，但我不想这样做，因为我的横幅是可选的，在某些情况下可能不存在。
这是firefox w / flexbox中的错误吗？我做错了什么？提前感谢您的帮助。
body {
margin: 0;
height: 100%;
display: flex;
flex-direction: column;
}
html {
height: 100%;
}
.container {
display: flex;
flex-direction: row;
height: 100%;
}
.banner {
flex: 1 1 auto;
background-color: #555;
color: #fff;
padding: 10px 0px;
}
.detail {
flex: 4 1 auto;
position: relative;
order: 2;
background-color: blue;
}
.master {
order: 1;
display: flex;
flex-direction: column;
width: 200px;
flex:1 1 auto;
background-color: yellow;
}
.master-items {
flex: 1 1 auto;
overflow-y: auto;
min-height: 0;
}
<div class="banner">
<div class="banner-text">
Optional banner at the top of my page
</div>
</div>
<div class="container">
<div class="master">
<div class="master-items">
orem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis nulla quis dapibus tincidunt. Praesent porta lectus in blandit fermentum. Curabitur tristique diam eu augue ultricies accumsan. Vestibulum hendrerit velit mauris, quis tincidunt ligula faucibus at. Nunc auctor lacus ante, a semper lorem blandit non. Proin tortor nunc, ultrices sit amet faucibus a, tristique vitae nunc. Vestibulum vitae dignissim tortor. Nullam hendrerit odio non neque rutrum, vitae egestas purus imperdiet. Morbi fermentum velit et elit commodo ultricies.
Integer ornare orci diam, vitae scelerisque erat feugiat sit amet. Etiam ut rhoncus diam. Ut ornare id ipsum quis gravida. Duis dignissim, dolor et laoreet bibendum, tellus odio aliquet erat, et molestie purus dolor vel diam. Aliquam erat volutpat. Sed bibendum et augue non pulvinar. Donec a tellus sed massa facilisis varius eu id neque. In tincidunt, arcu quis laoreet vulputate, lectus enim elementum velit, malesuada tempus justo neque sed justo. Fusce pulvinar, massa scelerisque hendrerit pharetra, nisi enim interdum sapien, id tempus dui libero ut arcu. Integer est magna, luctus a fermentum sit amet, facilisis at ante. Vestibulum ultricies urna ipsum, eu malesuada urna porta vitae. Mauris tincidunt molestie posuere. Nullam dictum urna maximus lobortis varius. Curabitur ut lorem at augue viverra tincidunt at at massa. Morbi venenatis dolor id nisi imperdiet, eu mollis ante aliquet.
Donec luctus ex vitae euismod egestas. In hac habitasse platea dictumst. Nullam non ligula tempor, dignissim ante sed, volutpat quam. Donec enim erat, interdum vitae efficitur vitae, vulputate eget libero. Phasellus ut lobortis nunc, a mollis dolor. Quisque a quam ligula. Sed eu gravida mi, interdum ullamcorper nulla. Ut eu lectus in enim dignissim ornare. Ut sit amet elit a magna pharetra laoreet eget id nibh. Ut rhoncus, urna fringilla porttitor euismod, urna dui viverra leo, at laoreet ipsum ipsum id risus. Aliquam in tellus sed lorem egestas posuere. Praesent iaculis commodo tortor ac euismod. Integer cursus dui vitae interdum vehicula.
Nam malesuada orci purus, vel placerat urna maximus ac. Fusce malesuada dolor nec arcu aliquet convallis. In lobortis at dolor id bibendum. Mauris semper, sem eu pretium ultricies, massa quam tempor dui, id consequat tellus arcu id nibh. Morbi ligula turpis, rutrum pulvinar finibus non, bibendum eu felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum justo arcu, gravida et turpis a, elementum mollis orci. Maecenas sagittis luctus massa at semper. Cras interdum efficitur nibh ac maximus. Pellentesque porta lacus eu lectus laoreet, quis luctus velit sagittis. Etiam condimentum sapien id metus efficitur gravida. Curabitur fermentum non justo a varius.
Ut nisi nisi, convallis in pellentesque feugiat, finibus a nisi. Proin ac lorem nec libero interdum auctor ut eu ex. Quisque felis neque, molestie id bibendum cursus, sollicitudin nec orci. Phasellus aliquet auctor massa, ut euismod tellus tincidunt vestibulum. Suspendisse pellentesque mattis sagittis. In hac habitasse platea dictumst. Proin faucibus posuere neque ullamcorper ultricies. Cras iaculis diam non mauris varius blandit. Praesent erat quam, tempor ac vehicula nec, feugiat a risus. Praesent viverra ornare faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Nunc nec arcu ultrices, porta urna non, lacinia lacus. Nam efficitur sem non odio rhoncus consectetur. Praesent non molestie ligula. Sed luctus sodales diam, vel hendrerit ipsum tristique sed. Morbi eu vehicula urna, et gravida diam. Maecenas in iaculis ante, eget faucibus arcu. Etiam vehicula lectus elit, eu tempus erat semper eget. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent vestibulum eleifend sapien nec consectetur. Nunc ut mauris accumsan diam fermentum vulputate quis et nibh.
Duis porttitor nisl a lacus scelerisque, quis rutrum libero porttitor. Nunc blandit finibus ante eget pellentesque. Sed tempor leo ut mi sodales aliquam. Nunc sagittis nibh tincidunt velit mattis blandit. Mauris viverra mi massa, non pellentesque libero rutrum nec. Morbi malesuada nisi lectus, at placerat dui convallis ac. Donec risus nisi, rhoncus ac venenatis sed, finibus sed nibh.
Praesent molestie molestie arcu. Pellentesque sit amet augue tristique, pharetra nisi nec, tempor elit. Vestibulum a dictum eros. Integer eros neque, eleifend vitae tortor a, volutpat vestibulum leo. Proin tempor nisi et metus malesuada, non condimentum orci tincidunt. Quisque accumsan metus vitae sollicitudin efficitur. Duis vulputate volutpat dolor eu sollicitudin. Vivamus eu nisl bibendum, lobortis purus quis, sollicitudin quam. Nulla id odio luctus, varius ex ullamcorper, pulvinar lacus. Nunc sollicitudin cursus purus, eget consequat lorem maximus sed. Phasellus gravida, sem vel bibendum lacinia, felis nibh faucibus lectus, eu pretium lorem elit in augue. In a massa magna. Nunc bibendum ultrices arcu in bibendum. Sed elit lectus, pulvinar sed euismod et, tincidunt ut justo.
Praesent viverra bibendum ipsum ac dapibus. Pellentesque malesuada interdum ex eu sagittis. Vestibulum pellentesque urna vitae justo tincidunt, non mattis purus maximus. In nec purus ac velit tempus tristique ac non nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur ac auctor lacus. Etiam vel pellentesque nunc. Nam odio orci, elementum sit amet metus eu, sodales laoreet erat. Integer nec quam ac ipsum mattis aliquam ut id nulla. Vestibulum eu erat hendrerit, iaculis est ac, ultricies mi. Nunc imperdiet non risus vitae fringilla. Vestibulum suscipit nec mauris bibendum viverra. Curabitur libero nibh, vulputate a aliquet sed, ultricies in nunc. Integer ut mollis dui. Ut ipsum lorem, luctus vitae dictum interdum, pretium vel nisl.
</div>
</div>
<div class="detail">
</div>
</div>
答案 0 :(得分：2)
不要弯曲导航，只需按其内容调整大小：
.banner {
flex: auto;
}
使容器填满横幅留下的剩余空间（如果没有横幅，则填充所有可用空间）：
.container {
flex: 1;
overflow: auto;
}
body {
margin: 0;
height: 100%;
display: flex;
flex-direction: column;
}
html {
height: 100%;
}
.container {
display: flex;
flex-direction: row;
flex: 1;
overflow: auto;
}
.banner {
background-color: #555;
color: #fff;
padding: 10px 0px;
}
.detail {
flex: 4 1 auto;
position: relative;
order: 2;
background-color: blue;
}
.master {
order: 1;
display: flex;
flex-direction: column;
width: 200px;
flex: 1 1 auto;
background-color: yellow;
}
.master-items {
flex: 1 1 auto;
overflow-y: auto;
min-height: 0;
}<div class="banner">
<div class="banner-text">
Optional banner at the top of my page
</div>
</div>
<div class="container">
<div class="master">
<div class="master-items">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis nulla quis dapibus tincidunt. Praesent porta lectus in blandit fermentum. Curabitur tristique diam eu augue ultricies accumsan. Vestibulum hendrerit velit mauris, quis tincidunt ligula faucibus at. Nunc auctor lacus ante, a semper lorem blandit non. Proin tortor nunc, ultrices sit amet faucibus a, tristique vitae nunc. Vestibulum vitae dignissim tortor. Nullam hendrerit odio non neque rutrum, vitae egestas purus imperdiet. Morbi fermentum velit et elit commodo ultricies. Integer ornare orci diam, vitae scelerisque erat feugiat sit amet. Etiam ut rhoncus diam. Ut ornare id ipsum quis gravida. Duis dignissim, dolor et laoreet bibendum, tellus odio aliquet erat, et molestie purus dolor vel diam. Aliquam erat volutpat. Sed bibendum et augue non pulvinar. Donec a tellus sed massa facilisis varius eu id neque. In tincidunt, arcu quis laoreet vulputate, lectus enim elementum velit, malesuada tempus justo neque sed justo. Fusce pulvinar, massa scelerisque hendrerit pharetra, nisi enim interdum sapien, id tempus dui libero ut arcu. Integer est magna, luctus a fermentum sit amet, facilisis at ante. Vestibulum ultricies urna ipsum, eu malesuada urna porta vitae. Mauris tincidunt molestie posuere. Nullam dictum urna maximus lobortis varius. Curabitur ut lorem at augue viverra tincidunt at at massa. Morbi venenatis dolor id nisi imperdiet, eu mollis ante aliquet. Donec luctus ex vitae euismod egestas. In hac habitasse platea dictumst. Nullam non ligula tempor, dignissim ante sed, volutpat quam. Donec enim erat, interdum vitae efficitur vitae, vulputate eget libero. Phasellus ut lobortis nunc, a mollis dolor. Quisque a quam ligula. Sed eu gravida mi, interdum ullamcorper nulla. Ut eu lectus in enim dignissim ornare. Ut sit amet elit a magna pharetra laoreet eget id nibh. Ut rhoncus, urna fringilla porttitor euismod, urna dui viverra leo, at laoreet ipsum ipsum id risus. Aliquam in tellus sed lorem egestas posuere. Praesent iaculis commodo tortor ac euismod. Integer cursus dui vitae interdum vehicula. Nam malesuada orci purus, vel placerat urna maximus ac. Fusce malesuada dolor nec arcu aliquet convallis. In lobortis at dolor id bibendum. Mauris semper, sem eu pretium ultricies, massa quam tempor dui, id consequat tellus arcu id nibh. Morbi ligula turpis, rutrum pulvinar finibus non, bibendum eu felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum justo arcu, gravida et turpis a, elementum mollis orci. Maecenas sagittis luctus massa at semper. Cras interdum efficitur nibh ac maximus. Pellentesque porta lacus eu lectus laoreet, quis luctus velit sagittis. Etiam condimentum sapien id metus efficitur gravida. Curabitur fermentum non justo a varius. Ut nisi nisi, convallis in pellentesque feugiat, finibus a nisi. Proin ac lorem nec libero interdum auctor ut eu ex. Quisque felis neque, molestie id bibendum cursus, sollicitudin nec orci. Phasellus aliquet auctor massa, ut euismod tellus tincidunt vestibulum. Suspendisse pellentesque mattis sagittis. In hac habitasse platea dictumst. Proin faucibus posuere neque ullamcorper ultricies. Cras iaculis diam non mauris varius blandit. Praesent erat quam, tempor ac vehicula nec, feugiat a risus. Praesent viverra ornare faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc nec arcu ultrices, porta urna non, lacinia lacus. Nam efficitur sem non odio rhoncus consectetur. Praesent non molestie ligula. Sed luctus sodales diam, vel hendrerit ipsum tristique sed. Morbi eu vehicula urna, et gravida diam. Maecenas in iaculis ante, eget faucibus arcu. Etiam vehicula lectus elit, eu tempus erat semper eget. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent vestibulum eleifend sapien nec consectetur. Nunc ut mauris accumsan diam fermentum vulputate quis et nibh. Duis porttitor nisl a lacus scelerisque, quis rutrum libero porttitor. Nunc blandit finibus ante eget pellentesque. Sed tempor leo ut mi sodales aliquam. Nunc sagittis nibh tincidunt velit mattis blandit. Mauris viverra mi massa, non pellentesque libero rutrum nec. Morbi malesuada nisi lectus, at placerat dui convallis ac. Donec risus nisi, rhoncus ac venenatis sed, finibus sed nibh. Praesent molestie molestie arcu. Pellentesque sit amet augue tristique, pharetra nisi nec, tempor elit. Vestibulum a dictum eros. Integer eros neque, eleifend vitae tortor a, volutpat vestibulum leo. Proin tempor nisi et metus malesuada, non condimentum orci tincidunt. Quisque accumsan metus vitae sollicitudin efficitur. Duis vulputate volutpat dolor eu sollicitudin. Vivamus eu nisl bibendum, lobortis purus quis, sollicitudin quam. Nulla id odio luctus, varius ex ullamcorper, pulvinar lacus. Nunc sollicitudin cursus purus, eget consequat lorem maximus sed. Phasellus gravida, sem vel bibendum lacinia, felis nibh faucibus lectus, eu pretium lorem elit in augue. In a massa magna. Nunc bibendum ultrices arcu in bibendum. Sed elit lectus, pulvinar sed euismod et, tincidunt ut justo. Praesent viverra bibendum ipsum ac dapibus. Pellentesque malesuada interdum ex eu sagittis. Vestibulum pellentesque urna vitae justo tincidunt, non mattis purus maximus. In nec purus ac velit tempus tristique ac non nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur ac auctor lacus. Etiam vel pellentesque nunc. Nam odio orci, elementum sit amet metus eu, sodales laoreet erat. Integer nec quam ac ipsum mattis aliquam ut id nulla. Vestibulum eu erat hendrerit, iaculis est ac, ultricies mi. Nunc imperdiet non risus vitae fringilla. Vestibulum suscipit nec mauris bibendum viverra. Curabitur libero nibh, vulputate a aliquet sed, ultricies in nunc. Integer ut mollis dui. Ut ipsum lorem, luctus vitae dictum interdum, pretium vel nisl.
</div>
</div>
<div class="detail"></div>
</div>