多个嵌套的flex：不能限制高度

Question

看看这段代码（整页）：

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;
}

所以它是一个水平的弹性容器。由于父元素，它的高度受到限制。 IRL 它应该有两个孩子。但为了简单起见，我把第二个放在了外面。没有必要证明这个问题。但请注意，这个 flex 容器必须是 flex-direction: row。

直接子 .theme-paragraph-section-content-container 应该是一个弹性项目，它的最大高度应该是父弹性容器的 100%。但我不能让它遵守max-heightrule。

问题是，白框中的文本在最后被裁剪。我想让它在框内滚动，但我无法让它工作。

.theme-paragraph-section-body的计算框

.theme-paragraph-section-content-container的计算框

我能做什么？

Answer 1

有一个 flex-shrink 应该设置为 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) */
}

在下面的代码中检查 cmets：

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>