Блог

Может ли кто-нибудь объяснить, почему отсутствует последнее (X и Y) и как решить проблему?

Должно быть видно 3 элемента:

• заголовок (1, 2), который занимает столько места, сколько ему нужно
• прокручиваемая основная часть (X, X,..), которая занимает все пространство, доступное после того, как верхний и нижний колонтитулы заняли свое место
• нижний колонтитул (X, Y)

https://stackblitz.com/edit/web-platform-arwv4n?file=index.html

 <div style="border: 2px solid #ffd1dc; overflow: hidden; height: 100%">
  <div style="display: flex; flex-direction: column; width: 100%; height: 100%">
    <div style="flex: 0 0 auto">
      <div>
        <p>1</p>
        <p>2</p>
      </div>
    </div>
    <div style="flex: 1 0 auto; height: 100%">
      <div
        style="display: flex; width: 100%; height: 100%; flex-direction: column"
      >
        <div
          style="
            display: flex;
            flex: 1 1 auto;
            overflow: auto;
            background-color: red;
            color: rgba(0, 0, 0, 0.87);
          "
        >
          <div
            style="
              flex: 1 1 auto;
              overflow: auto;
              background-color: red;
              color: rgba(0, 0, 0, 0.87);
            "
          >
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
          </div>
        </div>
        <div style="flex: 0 0 auto; background-color: green">
          <p>1</p>
          <p>2</p>
        </div>
      </div>
    </div>
  </div>
</div>