flex：1在Safari浏览器中仅占据100vh的高度，而不是整个内容的高度

Question

bounty到期在6天内。该问题的答案有资格获得+ 50声望赏金。TheCoder希望引起更多关注对此问题：

[发布答案前，请在safari上重新检查您的解决方案。

我具有以下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。

Codepen：https://codepen.io/puspender/pen/gOpqXGW?editors=1100

Answer 1

您可以尝试设置