flex:1 在 safari 浏览器上只取 100vh 高度而不是全部内容高度

Question

我的结构如下 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>

一切正常，除了 Safari 浏览器。如果里面的文本大于 100vh，content 不会占据 <p> 的完整高度。即使它已设置为 flex:1，它也只占用 100vh 高度。但是根据 CSS 规则，flex:1 占据容器的完整高度。 content的容器是page_right，它做内容的完整高度。不知道这里有什么问题。

/* 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>

不是：这是我实际应用程序的结构，所以我可能无法更改 HTML。

代码笔：https://codepen.io/puspender/pen/gOpqXGW?editors=1100

Answer 1

您可以尝试设置

.page {
  align-items: stretch; 
}

由于 .page 设置为 flex-direction: row;（默认值），您必须使用属性 align-items 来指定 [= 中元素的行为21=]横轴.

请检查： https://css-tricks.com/snippets/css/a-guide-to-flexbox/（对齐项目部分）

Answer 2

请试试这个。如果有帮助，请告诉我。

.page_right 只需要 overflow auto，因为里面只有一个元素 .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 我添加了 min-height: 100%; 来设置整个页面内容的高度，当我们'内容不足。我还删除了 width: 100% 因为默认情况下内容将占用整个 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 这是可选的，但我认为在这个 div 中内容可能会在没有 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>

flex:1 在 safari 浏览器上只取 100vh 高度而不是全部内容高度

flex:1 taking only the 100vh height on safari browser instead of full content height

html

css

safari