Многократное вложение: не может ограничивать высоту - PullRequest
Новая
       0

Многократное вложение: не может ограничивать высоту

0 голосов
/ 01 апреля 2020

Посмотрите на этот код (Полная страница): 

html {
  font-family: Montserrat, Arial, sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 62.5%;
  overflow-x: hidden;
  scroll-behavior: smooth;
  background-image: linear-gradient(45deg, orange, purple);
  background-size: cover;
  background-attachment: fixed;
}

/* section */
.theme-paragraph-section-subtitle {
  font-family: "Khand";
  font-size: 3rem;
  font-weight: 500;
  line-height: 0.67;
  color: #ffb400;
}

.theme-paragraph-section-title {
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
}

.theme-paragraph-section {
  height: calc(100vh - 7.5rem);
  display: -webkit-box;
  display: flex;
  scroll-snap-align: start;
}

.theme-paragraph-section:before,
.theme-paragraph-section:after {
  content: "";
  -webkit-box-flex: 1;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: calc(45rem / 2);
  pointer-events: none;
}

.theme-paragraph-section-content {
  padding: 6.3rem 0rem 3rem;
  -webkit-box-flex: 1;
  flex: 1 1 100%;
  min-width: 75rem;
  max-width: 120rem;
  box-sizing: border-box;
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  max-height: 100%;
}

.theme-paragraph-section-header,
.theme-paragraph-section-body {
  -webkit-box-flex: 0;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  -webkit-box-pack: justify;
  justify-content: space-between;
}

.theme-paragraph-section-body {
  display: -webkit-box;
  display: flex;
  /* -webkit-box-align: stretch; */
  -webkit-box-align: stretch;
          align-items: stretch;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  flex-basis: auto;
  margin-bottom: 15px;
  flex-wrap: wrap;
  overflow: hidden;
}

.theme-paragraph-section-content-container {
  -webkit-box-flex: 0;
  flex: 0 0 100%;
  width: 100%;
  /* display: -webkit-box; */
  /* display: flex; */
  height: 100%;
  /* overflow: hidden; */
  align-self: flex-start;
}

.theme-paragraph-section-subtitle {
  margin: 0;
}

.theme-paragraph-section-title {
  margin: 0;
  width: 80rem;
  margin-top: 1rem;
  position: relative;
}

.theme-paragraph-section-first,
.theme-paragraph-section-next {
  width: 5rem;
  height: 5rem;
  display: block;
  color: #ffb400;
  -webkit-transition: color 0.3s linear;
  transition: color 0.3s linear;
}

.theme-paragraph-section-first:hover,
.theme-paragraph-section-first:focus,
.theme-paragraph-section-first:active,
.theme-paragraph-section-next:hover,
.theme-paragraph-section-next:focus,
.theme-paragraph-section-next:active {
  color: #114f40;
}

.theme-paragraph-section-first {
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
}

/* body --------------------------------------------------------- */
.theme-paragraph-body p.intro {
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.18;
  color: #0c6158;
}

.theme-paragraph-body p {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.33;
  color: #000000;
}

.theme-paragraph-body li,
.theme-paragraph-body dd {
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.18;
  color: #4a4a4a;
}

.theme-paragraph-body {
  margin-top: 3rem;
  margin-left: 19rem;
  background-color: #ffffff;
  display: -webkit-box;
  display: flex;
  height: calc(100% - 3rem);
  box-sizing: border-box;
  position: relative;
  -webkit-box-flex: 1;
  flex: auto;
}

.theme-paragraph-body .theme-field-body {
  flex-basis: auto;
  margin: 5rem 4rem 5rem 5rem;
  padding: 0 1rem 0 0;
  position: relative;
  overflow: auto;
  -ms-scroll-chaining: none;
  overscroll-behavior: contain;
}

.theme-paragraph-body .theme-field-body-content {
  scrollbar-width: thin;
}

.theme-paragraph-body p:first-child {
  margin-top: 0;
}

.theme-paragraph-body ul,
.theme-paragraph-body ol,
.theme-paragraph-body dl {
  padding: 0;
  margin: 3.6rem 0 0 2.7rem;
}

.theme-paragraph-body ul:first-child,
.theme-paragraph-body ol:first-child,
.theme-paragraph-body dl:first-child {
  margin-top: 0;
}

.theme-paragraph-body li,
.theme-paragraph-body dd {
  margin: 1.18rem 0 0 0;
  padding: 0;
  list-style-type: none;
  list-style-position: outside;
  min-height: 3.6rem;
  position: relative;
}

.theme-paragraph-body ul li li {
  list-style-type: disc;
}

#paragraph-207 .theme-paragraph-section-next {
  display: none;
}
<div class="theme-paragraph-section" id="paragraph-15">
  <div class="theme-paragraph-section-content">
    <div class="theme-paragraph-section-header">
      <h3 class="theme-paragraph-section-subtitle">Lorem ipsum dolor sit.</h3>
      <h2 class="theme-paragraph-section-title">Lorem ipsum dolor sit amet consectetur.</h2>
    </div>
    <div class="theme-paragraph-section-body">

      <div class="theme-paragraph-section-content-container type-paragraph_body ">

        <div class="theme-paragraph-body" id="paragraph-123">

          <div class="theme-field-body ss-container">
            <div class="theme-field-body-content">
              <p class="intro">The text inside this box is cropped at the end of the box. The box should be scrollable, but I can't restrict the height of the box to the height of the container.</p>

              <ul>
                <li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eum, alias ab. Molestiae consectetur quae veniam?</li>
                <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero ut, nisi perferendis placeat et reiciendis, quam vel aliquid, quibusdam fugiat iure minus enim possimus amet.</li>
                <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate sapiente velit quibusdam rerum? Tempore, sequi assumenda neque consequatur voluptate vero rerum eveniet?</li>
                <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam officia odio ullam nemo fugit impedit optio natus? Laborum temporibus non sit qui vero nisi, necessitatibus consequuntur eum iusto velit accusamus eos perferendis tenetur corrupti nemo magni veniam harum quisquam error.</li>
                <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iure, nisi.:
                  <ul>
                    <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit;</li>
                    <li>Lorem ipsum dolor sit amet consectetur adipisicing;</li>
                    <li>Lorem, ipsum dolor.</li>
                    <li>Lorem ipsum dolor sit amet consectetur.</li>
                  </ul>
                </li>
                <li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquid sapiente architecto, autem debitis porro ea fugiat ipsa. Ullam, et possimus.</li>
              </ul>
              <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Mollitia eius quaerat quae suscipit, fugiat totam quasi reiciendis maiores aspernatur nihil architecto natus expedita dolorum dolorem pariatur repellendus et ut officia quia rerum, cupiditate ratione beatae! Atque temporibus minus ducimus optio?</p>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, dolores labore. Deserunt autem vero impedit sapiente quibusdam, modi ratione eaque officia. Molestiae soluta maxime impedit perferendis earum iusto corporis dolores, quibusdam deleniti illum veniam doloribus ab architecto id nesciunt voluptatum.</p>
              <p>Quos aliquam eaque, vitae explicabo quibusdam commodi a ipsum molestiae cupiditate, temporibus quis expedita, assumenda in aspernatur accusamus consectetur praesentium aliquid tenetur voluptas animi autem repellendus? Est aspernatur, repellendus quae, nostrum delectus dolorem quo, beatae ad magnam obcaecati repellat vel?</p>
              <p>Itaque voluptas eum earum esse. Eligendi maiores odio, omnis dicta obcaecati eius nisi, aspernatur unde iste porro at nulla vitae placeat repudiandae sapiente ducimus tempora pariatur perferendis. Voluptates tempore nostrum, repudiandae ipsa incidunt quaerat architecto, temporibus delectus cum nesciunt voluptatum!</p>
            </div>
          </div>
        </div>
      </div>


    </div>

  </div>
</div>

Это упрощенный пример какого-то реального кода. Структура должна быть такой сложной, потому что есть другое содержимое, которое не показано в примере.

Если вы рассматриваете элемент .theme-paragraph-section-body: он имеет этот стиль 

.theme-paragraph-section-body {
    display: flex;
    align-items: stretch;
    flex-direction: row;
    flex-basis: auto;
    flex-wrap: wrap;
    overflow: hidden;
}

Так что горизонтальный гибкий контейнер И он имеет ограниченную высоту из-за родительских элементов. В реале должно быть двое детей. Но я упустил второй для простоты. Нет необходимости демонстрировать проблему. Но имейте в виду, что этот гибкий контейнер обязательно flex-direction: row.

Прямой дочерний элемент .theme-paragraph-section-content-container должен быть гибким элементом, максимальная высота которого должна составлять 100% от родительского гибкого контейнера. Но я не могу заставить его подчиняться правилу max-height.

Проблема в том, что текст внутри белого поля обрезается в конце. Я хочу, чтобы он прокручивался внутри окна, но я не могу заставить его работать.

Вычисляемая коробка .theme-paragraph-section-body

enter image description here

Вычисляемая коробка .theme-paragraph-section-content-container

enter image description here

Что я могу сделать?

1 Ответ

0 голосов
/ 01 апреля 2020

Существует гибкое сжатие, которое должно быть установлено на 1, необходимо некоторое превышение, а некоторые направления изменяются от строки к столбцу. 

.theme-paragraph-section-body {
  flex-direction: column; /* updated */
}

.theme-paragraph-section-content-container {
  flex: 0 1 100%; /* you need flex-shrink=1 */
  overflow: auto; /* added this (or min-height:0) */
  display:flex; /* added */
  flex-direction: column; /* added this */
}

.theme-paragraph-body {
  min-height: 0; /* added (or overflow:auto) */
}

Проверьте комментарии в следующем коде: 

html {
  font-family: Montserrat, Arial, sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 62.5%;
  overflow-x: hidden;
  scroll-behavior: smooth;
  background-image: linear-gradient(45deg, orange, purple);
  background-size: cover;
  background-attachment: fixed;
}

/* section */
.theme-paragraph-section-subtitle {
  font-family: "Khand";
  font-size: 3rem;
  font-weight: 500;
  line-height: 0.67;
  color: #ffb400;
}

.theme-paragraph-section-title {
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
}

.theme-paragraph-section {
  height: calc(100vh - 7.5rem);
  display: -webkit-box;
  display: flex;
  scroll-snap-align: start;
}

.theme-paragraph-section:before,
.theme-paragraph-section:after {
  content: "";
  -webkit-box-flex: 1;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: calc(45rem / 2);
  pointer-events: none;
}

.theme-paragraph-section-content {
  padding: 6.3rem 0rem 3rem;
  -webkit-box-flex: 1;
  flex: 1 1 100%;
  min-width: 75rem;
  max-width: 120rem;
  box-sizing: border-box;
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  max-height: 100%;
}

.theme-paragraph-section-header,
.theme-paragraph-section-body {
  -webkit-box-flex: 0;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  -webkit-box-pack: justify;
  justify-content: space-between;
}

.theme-paragraph-section-body {
  display: -webkit-box;
  display: flex;
  /* -webkit-box-align: stretch; */
  -webkit-box-align: stretch;
          align-items: stretch;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: column; /* updated */
  flex-basis: auto;
  margin-bottom: 15px;
  flex-wrap: wrap;
  overflow: hidden;
}

.theme-paragraph-section-content-container {
  flex: 0 1 100%; /* you need flex-shrink=1 */
  width: 100%;
  height: 100%;    
  overflow: auto; /* added this */
  align-self: flex-start;    
  display:flex; /* added */
  flex-direction: column; /* added this */
}

.theme-paragraph-section-subtitle {
  margin: 0;
}

.theme-paragraph-section-title {
  margin: 0;
  width: 80rem;
  margin-top: 1rem;
  position: relative;
}

.theme-paragraph-section-first,
.theme-paragraph-section-next {
  width: 5rem;
  height: 5rem;
  display: block;
  color: #ffb400;
  -webkit-transition: color 0.3s linear;
  transition: color 0.3s linear;
}

.theme-paragraph-section-first:hover,
.theme-paragraph-section-first:focus,
.theme-paragraph-section-first:active,
.theme-paragraph-section-next:hover,
.theme-paragraph-section-next:focus,
.theme-paragraph-section-next:active {
  color: #114f40;
}

.theme-paragraph-section-first {
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
}

/* body --------------------------------------------------------- */
.theme-paragraph-body p.intro {
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.18;
  color: #0c6158;
}

.theme-paragraph-body p {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.33;
  color: #000000;
}

.theme-paragraph-body li,
.theme-paragraph-body dd {
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.18;
  color: #4a4a4a;
}

.theme-paragraph-body {
  margin-top: 3rem;
  margin-left: 19rem;
  background-color: #ffffff;
  display: -webkit-box;
  display: flex;
  height: calc(100% - 3rem);
  box-sizing: border-box;
  position: relative;
  -webkit-box-flex: 1;
  flex: auto;
  min-height: 0; /* added */
}

.theme-paragraph-body .theme-field-body {
  flex-basis: auto;
  margin: 5rem 4rem 5rem 5rem;
  padding: 0 1rem 0 0;
  position: relative;
  overflow: auto;
  -ms-scroll-chaining: none;
  overscroll-behavior: contain;
}

.theme-paragraph-body .theme-field-body-content {
  scrollbar-width: thin;
}

.theme-paragraph-body p:first-child {
  margin-top: 0;
}

.theme-paragraph-body ul,
.theme-paragraph-body ol,
.theme-paragraph-body dl {
  padding: 0;
  margin: 3.6rem 0 0 2.7rem;
}

.theme-paragraph-body ul:first-child,
.theme-paragraph-body ol:first-child,
.theme-paragraph-body dl:first-child {
  margin-top: 0;
}

.theme-paragraph-body li,
.theme-paragraph-body dd {
  margin: 1.18rem 0 0 0;
  padding: 0;
  list-style-type: none;
  list-style-position: outside;
  min-height: 3.6rem;
  position: relative;
}

.theme-paragraph-body ul li li {
  list-style-type: disc;
}

#paragraph-207 .theme-paragraph-section-next {
  display: none;
}
<div class="theme-paragraph-section" id="paragraph-15">
  <div class="theme-paragraph-section-content">
    <div class="theme-paragraph-section-header">
      <h3 class="theme-paragraph-section-subtitle">Lorem ipsum dolor sit.</h3>
      <h2 class="theme-paragraph-section-title">Lorem ipsum dolor sit amet consectetur.</h2>
    </div>
    <div class="theme-paragraph-section-body">

      <div class="theme-paragraph-section-content-container type-paragraph_body ">

        <div class="theme-paragraph-body" id="paragraph-123">

          <div class="theme-field-body ss-container">
            <div class="theme-field-body-content">
              <p class="intro">The text inside this box is cropped at the end of the box. The box should be scrollable, but I can't restrict the height of the box to the height of the container.</p>

              <ul>
                <li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eum, alias ab. Molestiae consectetur quae veniam?</li>
                <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero ut, nisi perferendis placeat et reiciendis, quam vel aliquid, quibusdam fugiat iure minus enim possimus amet.</li>
                <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate sapiente velit quibusdam rerum? Tempore, sequi assumenda neque consequatur voluptate vero rerum eveniet?</li>
                <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam officia odio ullam nemo fugit impedit optio natus? Laborum temporibus non sit qui vero nisi, necessitatibus consequuntur eum iusto velit accusamus eos perferendis tenetur corrupti nemo magni veniam harum quisquam error.</li>
                <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iure, nisi.:
                  <ul>
                    <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit;</li>
                    <li>Lorem ipsum dolor sit amet consectetur adipisicing;</li>
                    <li>Lorem, ipsum dolor.</li>
                    <li>Lorem ipsum dolor sit amet consectetur.</li>
                  </ul>
                </li>
                <li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquid sapiente architecto, autem debitis porro ea fugiat ipsa. Ullam, et possimus.</li>
              </ul>
              <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Mollitia eius quaerat quae suscipit, fugiat totam quasi reiciendis maiores aspernatur nihil architecto natus expedita dolorum dolorem pariatur repellendus et ut officia quia rerum, cupiditate ratione beatae! Atque temporibus minus ducimus optio?</p>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, dolores labore. Deserunt autem vero impedit sapiente quibusdam, modi ratione eaque officia. Molestiae soluta maxime impedit perferendis earum iusto corporis dolores, quibusdam deleniti illum veniam doloribus ab architecto id nesciunt voluptatum.</p>
              <p>Quos aliquam eaque, vitae explicabo quibusdam commodi a ipsum molestiae cupiditate, temporibus quis expedita, assumenda in aspernatur accusamus consectetur praesentium aliquid tenetur voluptas animi autem repellendus? Est aspernatur, repellendus quae, nostrum delectus dolorem quo, beatae ad magnam obcaecati repellat vel?</p>
              <p>Itaque voluptas eum earum esse. Eligendi maiores odio, omnis dicta obcaecati eius nisi, aspernatur unde iste porro at nulla vitae placeat repudiandae sapiente ducimus tempora pariatur perferendis. Voluptates tempore nostrum, repudiandae ipsa incidunt quaerat architecto, temporibus delectus cum nesciunt voluptatum!</p>
            </div>
          </div>
        </div>
      </div>


    </div>

  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...