css flex устанавливает прокручиваемый div до 100 процентов родительского - PullRequest
Новая
       13

css flex устанавливает прокручиваемый div до 100 процентов родительского

0 голосов
/ 02 марта 2019

У меня есть div с неизвестной высотой, и этот div содержит дочерний div с прокручиваемым содержимым.Я хочу, чтобы div с прокручиваемым содержимым принимал высоту родительского div, чтобы родительский div не переполнялся, и полоса прокрутки дочернего элемента была полностью видимой.Возможно ли это с чистым CSS?

1 Ответ

0 голосов
/ 02 марта 2019

Если я правильно понимаю проблему, вы хотите использовать абсолютное позиционирование .

.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>
...