问题
I am having the below structure of html:
<div class="root">
<div class="page">
<div class="page_left"></div>
<div class="page_right">
<div class="content">
<div class="content_left">
<p>
content here
</p>
</div>
<div class="content_right"></div>
</div>
</div>
</div>
</div>
Everything is fine except on Safari browser. The content is not taking the complete height of the <p> if the text inside is greater than 100vh. Even though it has been set to flex:1 it only takes 100vh height. But as per the CSS rules flex:1 takes the complete height of the container. The container of content is page_right and it does the complete height of the content. Don't know what the issue here.
/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.26, autoprefixer: v9.7.3) */
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
height: 100%;
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.root {
height: 100%;
width: 100%;
}
.page {
height: 100%;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.page .page_left {
min-width: 100px;
background: black;
height: 100%;
}
.page .page_right {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
overflow: scroll;
}
.page_right .content {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.page_right .content .content_left {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background: yellow;
}
.page_right .content .content_right {
min-width: 200px;
background: orange;
}<div class="root">
<div class="page">
<div class="page_left"></div>
<div class="page_right">
<div class="content">
<div class="content_left">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<br
/><br /><br /> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
<br /><br /><br /> It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br /><br /><br
/> Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.<br /><br /><br /><br /> The point of using Lorem Ipsum is that it has a more-or-less normal distribution
of letters, as opposed to using 'Content here, content here', making it look like readable English.
<br /><br /><br /> Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
<br /><br /><br /> Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
<br /><br /><br /> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book.<br /><br /><br /> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
<br /><br /><br /> It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br /><br /><br
/> Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.<br /><br /><br /><br /> The point of using Lorem Ipsum is that it has a more-or-less normal distribution
of letters, as opposed to using 'Content here, content here', making it look like readable English.
<br /><br /><br /> Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
<br /><br /><br /> Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
<br /><br /><br /> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book.<br /><br /><br /> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
<br /><br /><br /> It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br /><br /><br
/> Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.<br /><br /><br /><br /> The point of using Lorem Ipsum is that it has a more-or-less normal distribution
of letters, as opposed to using 'Content here, content here', making it look like readable English.
<br /><br /><br /> Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
<br /><br /><br /> Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>
</div>
<div class="content_right"></div>
</div>
</div>
</div>
</div>Not: This is the structure of my real application, so probably I can't change the HTML.
Codepen: https://codepen.io/puspender/pen/gOpqXGW?editors=1100
回答1:
Please try this. And let me know if it helped.
.page_right only needs overflow auto, because inside of it you have only one element which is .content
.page .page_right {
/* -webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; */
overflow: auto;
}
.content I've added min-height: 100%; to set height for content of the whole page when we've not enough content. I've also removed width: 100% because by default content will take the whole space left
.page_right .content {
/* -webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
width: 100%;
display: -webkit-box;
display: -ms-flexbox; */
display: flex;
min-height: 100%;
}
.content_left this is optional, but I think in this div content may flow in default flow without flex.
.page_right .content .content_left {
/* -webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex; */
background: yellow;
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.root {
height: 100%;
width: 100%;
}
.page {
height: 100%;
width: 100%;
display: flex;
}
.page .page_left {
min-width: 100px;
background: black;
height: 100%;
}
.page .page_right {
overflow-y: auto;
}
.page_right .content {
display: flex;
min-height: 100%;
}
.page_right .content .content_left {
background: yellow;
}
.page_right .content .content_right {
min-width: 200px;
background: orange;
}<div class="root">
<div class="page">
<div class="page_left"></div>
<div class="page_right">
<div class="content">
<div class="content_left">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<br
/><br /><br /> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<br
/><br /><br /> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<br
/><br /><br /> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<br
/><br /><br /> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<br
/><br /><br /> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</div>
<div class="content_right"></div>
</div>
</div>
</div>
</div>回答2:
You can try setting
.page {
align-items: stretch;
}
As .page is set to flex-direction: row; (default value), you have to use the property align-items to specify the behaviour of the elements in the cross axis.
Please check: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ (align-items section)
来源：https://stackoverflow.com/questions/60931915/flex1-taking-only-the-100vh-height-on-safari-browser-instead-of-full-content-he