html - 如何让滚动的 div 占其父元素的 100% 以下？

Question

我觉得这应该是一个非常简单的问题，但我似乎无法弄清楚。

HTML:

<div class="outer">
  <div class="inner">
    <!-- lots of text -->
  </div>
  <div class="inner-bottom">
    This text should be inside the blue background
  </div>
</div>

CSS:

.outer {
  height: 300px;
  background: #99EEFF;
}

.inner {
  height: 100%;
  overflow: scroll;
}

.inner-bottom {
  text-align: center
}

Fiddle

目标是让两个内部 div 都显示在它们的父级中，父级具有指定的背景以直观地组织它们。

如果我没有在 .inner 上指定 height: 100%;，无论我在 display 上设置哪个，它都会溢出属性(property)。事实上，display 的某些值甚至会导致 height: 100% 不起作用。

无论如何，我非常希望.inner 的大小由.outer 的大小决定，而不是相反。我该怎么做？

Answer 1

你可以用 Flexbox 做到这一点，只需在 .inner 上使用 flex: 1

body {
  margin: 0px;
}
.outer {
  height: 300px;
  flex-direction: column;
  display: flex;
  background: #99EEFF;
}
.inner {
  flex: 1;
  overflow-y: scroll;
}
.inner-bottom {
  text-align: center
}

<div class="outer">
  <div class="inner">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis fugiat nulla asperiores rerum sed dignissimos vitae odit consectetur perferendis! Suscipit qui hic iste est tempora blanditiis odit distinctio odio quas amet. Fuga mollitia maxime labore non odio laborum ea facilis distinctio blanditiis exercitationem atque et, facere illo repellat praesentium inventore iure. Minus error expedita veritatis doloribus esse, at cum molestias odit saepe animi harum similique, dolore distinctio est a quidem beatae! Aliquam, similique autem ipsa vitae eligendi iure consectetur. Quasi, odio expedita consequatur, maxime, libero maiores incidunt quia debitis hic provident cum, deleniti? Illo id pariatur, recusandae tenetur! Beatae cum, fuga! Nulla animi deserunt molestiae eum quia dolorum necessitatibus quod eos saepe sint eaque id est cupiditate impedit, doloribus consequuntur ipsum maiores consequatur alias. Magnam accusantium ab quia laudantium iste eum nobis sequi error, atque suscipit repellendus officiis laboriosam alias eos ullam. At inventore quam ullam officia sequi, aliquam. Aperiam dicta eum illo tempora, quas doloribus ducimus sequi placeat, aut id quaerat iure officiis nostrum accusamus atque odio repudiandae saepe autem distinctio. Qui expedita cum animi totam maxime minima labore vitae reprehenderit eligendi porro odio, voluptatem obcaecati sint enim, velit dolores, dolore fugit incidunt sit. Doloremque suscipit, quia libero. Odit nihil beatae eaque suscipit aperiam hic tempore ipsam non quam doloremque, nesciunt voluptate laboriosam a animi assumenda iste velit sunt cumque minima. Quos perferendis, labore. Consectetur quod sequi commodi nesciunt suscipit, molestiae, quia est cum. Beatae nulla, suscipit ducimus nobis voluptas illum enim dicta distinctio similique aliquam sapiente impedit ea non corrupti omnis est obcaecati labore laboriosam quaerat tempora molestias sunt laudantium doloremque? Perspiciatis dolore, excepturi, voluptate nulla nam culpa nostrum dolor, rerum quas iure dolorem incidunt consequatur dolores dolorum laborum ipsam eaque quasi accusamus voluptatum voluptates quisquam. Perspiciatis maxime, assumenda itaque eligendi dolore iste libero debitis ea sint expedita eius illum blanditiis inventore officiis voluptates minima iusto fuga nulla veritatis quo deserunt ad quisquam. Cumque numquam nihil tenetur itaque obcaecati soluta, libero possimus dolore ipsa eum neque amet sunt ad sapiente quos quae deleniti voluptas illo molestiae. Nihil officiis, commodi fugiat architecto blanditiis! Atque neque numquam nobis voluptates accusantium libero tempore veniam fugit officiis alias soluta rem enim, totam aut eos, nam. Fuga labore fugiat, suscipit consequatur ipsum quia praesentium. Reprehenderit praesentium maxime, ea maiores repellat, facere architecto quasi vitae a hic similique impedit commodi dolor, quas necessitatibus saepe ipsum. Nulla distinctio corporis dolor praesentium eum laudantium, asperiores magni minus tempora, iusto veritatis fuga. Totam ratione incidunt, neque blanditiis iure corporis consectetur ea dignissimos nesciunt tenetur ab placeat, harum eaque laboriosam numquam quas ipsum! Earum aperiam, voluptatibus assumenda quisquam dolorem ut eius non provident numquam nostrum rerum, magnam voluptatum beatae quibusdam quasi ad consequuntur perspiciatis fugiat soluta ipsa excepturi! Earum, accusamus quidem! Quos, eaque inventore perferendis quia officiis tempore sequi repellendus incidunt quo, numquam aut mollitia, atque earum architecto. Harum ipsa debitis necessitatibus quos sapiente ad deleniti quod non nihil libero iure voluptatem, omnis possimus tempore eos recusandae! Provident modi nulla dicta, aut possimus dolores nesciunt officiis sunt! Sunt!
  </div>
  <div class="inner-bottom">
    This text should be inside the blue background
  </div>
</div>