CSS Полная высота с делениями, распределяющими левое пространство

Question

Я создаю окно сообщения с заголовком, описанием и ответами. Я боролся с этим в течение нескольких дней, даже играл с Codepen, но не могу понять, как с этим справиться.

Мне нужно:

• Заголовок для увеличения до максимума 300px перед прокруткой
• Описание, чтобы расширить до максимума в левое пространство, если нет ответа (или мало), распределить пространство, скажем, 80% пространства в противном случае (я добавлю кнопку, чтобы скрыть это пространство), прежде чем прокрутить также
• Фиксированная высота заголовка номера сообщения
• Div для увеличения размера сообщения до максимального оставленного пространства.
• Область ввода остается в нижней части и может увеличиваться при вводе пользователем (скажем, снова) 20% до прокрутки?)

Ссылка Codepen

<div class="demoContainer">
  <div class="page">
    <div class="title">
      <h1>My awesome title that is so long i will move everything down</h1>
      <button>Some stuff to click</button>
    </div>
    <div class="row">
      <div class="colLeft">
        <div class="description">
          <h2>Author</h2>
          <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
        </div>
        <div class="between">
          <p>Answers</p>
        </div>
        <div class="messages">
          <ul>
            <li>
              toto
            </li>
            <li>
              tAta
            </li>
            <li>
              tAta
              tAta
            </li>
            <li>
              tAta
            </li>
            <li>
              tAta
            </li>
            <li>
              tAta
            </li>
            >
            <li>
              tAta
            </li>
            >
            <li>
              tAta
            </li>
            >
            <li>
              tAta
            </li>
            >
            <li>
              tAta
            </li>
          </ul>
        </div>
        <div class="input">
          <textarea placeholder="Input height adapt to size until a maximum"></textarea>
        </div>
      </div>
      <div class="colRight">
        <ul>
          <li>
            some
          </li>
          <li>
            stuff
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="divider"></div>
  <div class="page">
    <div class="title">
      <h1>My awesome short title</h1>
      <button>Some stuff to click</button>
    </div>
    <div class="row">
      <div class="colLeft">
        <div class="description">
          <h2>Author</h2>
          <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
        </div>
        <div class="between">
          <p>Answers</p>
        </div>
        <div class="messages">
          <ul>
            <li>
              toto
            </li>
            <li>
              tAta
            </li>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
          </ul>
        </div>
        <div class="input">
          <textarea placeholder="Input height adapt to size until a maximum"></textarea>
        </div>
      </div>
      <div class="colRight">
        <ul>
          <li>
            some
          </li>
          <li>
            stuff
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

* {
  box-sizing: border-box;
}

.demoContainer {
  display: flex;
  flex-direction: row;
}

.divider {
  width: 8px;
}

.page {
  height: 600px;
  width: 550px;
  background-color: lightgrey;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.title {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  max-height: 200px;
}

.title button {
  width: 90px;
  height: 30px;
}

.row {
  display: flex;
  /*flex: 1 1 100%;*/
  min-height: 0;
  height: 100%;
}

.colLeft {
  flex: 3 1 auto;
  min-height: 0;
  height: 100%;
  border: 1px solid blue;
  display: block;
  flex-direction: column;
  position: relative;
  /*align-items: stretch;
      align-content: stretch;*/
}

.description {
  border: 1px dashed black;
  /*flex: 4 1 100%;*/
  max-height: 60%;
  overflow: scroll;
}

.between {
  border: 1px solid green;
  height: 1, 1em;
}

.between>p {
  margin: 0;
}

.messages {
  border: 1px dashed red;
  /*flex: 2 100 auto;*/
  overflow: scroll;
}

ul {
  max-width: 100%;
}

.input {
  width: 100%;
  min-height: 1rem;
  flex: 1 1 3rem;
  display: flex;
  border: 1px solid yellow;
  position: relative;
  bottom: 0;
}

.input>textarea {
  width: 100%;
}

.colRight {
  flex: 1 1 auto;
  border: 1px solid black;
  min-width: 150px;
  overflow: scroll;
}

Справа приведен краткий пример того, что я хотел бы, но удалите <br/>, чтобы увидеть проблему.

Я пробовал с display: grid, isplay: block display: flex. Кажется, я не могу найти ничего, что удовлетворяло бы мои потребности.

Мой вопрос: возможно ли это? Только с CSS?

Answer 1

Для всех, кто интересуется, я обнаружил несколько вещей, копаясь в css.

Прежде всего, вы можете установить высоту 100% для div, чтобы занять свободное место, если другой элемент находится в , но если и только если вы установите родительский элемент display: flex;! Имея это в виду, все становится проще.

После этого я решил погрузиться в JS, так как моя проблема, похоже, не решаема только с CSS. Я воспользовался «новым» свойством position: sticky;, и мой JS может позаботиться о его положении top: 0; или bottom: 0; в зависимости от позиции прокрутки.

CSS Добавлено:

    .stickyBottom{
      position: sticky;
      bottom: 0;
    }
    .stickyTop{
      position: sticky;
      top: 0;
    }

JS Код добавлен:

    var colLeft = document.getElementsByClassName("messagesInput")[0];
    colLeft.onscroll = function(){myFunction()};
    // Get the navbar
    var between = document.getElementsByClassName("between")[0];
    var desc = document.getElementsByClassName("description")[0];

    // Get the offset position of the navbar
    var sticky = between.offsetTop;
    //between.classList.remove("stickyBottom")

    function myFunction() {
      if (colLeft.scrollTop >= sticky) {
         between.classList.remove("stickyBottom")
        between.classList.add("stickyTop")
      } else {
           between.classList.add("stickyBottom")
     between.classList.remove("stickyTop");
      }
    }

В конечном итоге UX получился лучше, чем я хотел изначально! :) CodePen Link обновлено соответственно.