flex: 1 берет высоту 100vh в браузере Safari вместо полной высоты содержимого

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. content не принимает полную высоту <p>, если текст внутри больше 100vh. Несмотря на то, что он был установлен на 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>

Not: Это структура моего реального приложения, поэтому, вероятно, я не могу изменить HTML.

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

Answer 1

Пожалуйста, попробуйте это. И дайте мне знать, если это помогло.

.page_right требуется только переполнение авто, потому что внутри него есть только один элемент, который .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%; , чтобы установить высоту для содержимого всей страницы, когда нам не хватает содержимого. Я также удалил ширину: 100%, потому что по умолчанию содержимое будет занимать все оставленное пространство поток по умолчанию без 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>

Answer 2

Вы можете попробовать установить

.page {
  align-items: stretch; 
}

Поскольку .page имеет значение flex-direction: row; (значение по умолчанию), вы должны использовать свойство align-items, чтобы указать поведение элементов в поперечная ось .

Пожалуйста, проверьте: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ (секция выравнивания элементов)