css flex 将可滚动的 div 设置为父级的 100%

Question

我有一个高度未知的 div，并且该 div 包含一个具有可滚动内容的子 div。我希望带有可滚动内容的 div 取父 div 的高度，这样父 div 不会溢出，子的滚动条将完全可见。纯css可以吗？

Answer 1

如果我正确理解问题，您想使用absolute positioning。

.parent {
  box-shadow: 0 0 0 2px red; /* So we can see the parent div */
  height: 450px; /* This value is unknown */
  position: relative; /* Allows the child to be positioned relative to the parent */
  width: 400px;
}

.child {
  box-shadow: 0 0 0 2px green inset; /* So we can see the child div */
  height: 100%; /* The parent's height */
  left: 0; /* Left edge of parent */
  overflow-y: auto; /* Allow scrolling if needed */
  position: absolute; /* Positions the child within the relative parent */
  top: 0; /* Top edge of parent */
  width: 100%; /* The parent's width */
}

<div class="parent">
  <div class="child">
    <p>Don't fiddle with it all day. This piece of canvas is your world. Let's go up in here, and start having some fun We start with a vision in our heart, and we put it on canvas. Trees grow in all kinds of ways. They're not all perfectly straight. Not every limb is perfect.</p>

    <p>Working it up and down, back and forth. I'm gonna start with a little Alizarin crimson and a touch of Prussian blue Exercising the imagination, experimenting with talents, being creative; these things, to me, are truly the windows to your soul. The very fact that you're aware of suffering is enough reason to be overjoyed that you're alive and can experience it. Here's another little happy bush</p>

    <p>Let's make a nice big leafy tree. Clouds are free. They just float around the sky all day and have fun. All you have to do is let your imagination go wild. There we go.</p>

    <p>Talent is a pursued interest. That is to say, anything you practice you can do. Every highlight needs it's own personal shadow. You have to make almighty decisions when you're the creator. Be so very light. Be a gentle whisper. We don't make mistakes we just have happy little accidents. Let's make some happy little clouds in our world.</p>

    <p>I get carried away with this brush cleaning. I started painting as a hobby when I was little. I didn't know I had any talent. I believe talent is just a pursued interest. Anybody can do what I do. It's a super day, so why not make a beautiful sky? Mountains are so simple, they're hard.</p>

    <p>Just let go - and fall like a little waterfall. This is truly an almighty mountain. Let's put some highlights on these little trees. The sun wouldn't forget them.</p>

  </div>
</div>