Как рассчитывается высота в этом случае?

Question

В этой настройке:

html,
body {
  height: 100%;
}

.app {
  display: flex;
}

.menu {
  background-color: red;
  width: 100px;
}

.content {
  flex: 1;
  border: 1px solid blue;
}

<div class="app">
    <div class="menu">menu</div>
    <div class="content">
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <div>content</div>
    </div>
  </div>

У меня два вопроса.

1. Вы видите, что высота menu равна высоте content, право?Может кто-нибудь объяснить, почему это так?Унаследовал ли он высоту app (высота которой была рассчитана динамически на основе содержимого content div)?

2. Если я вставлю height: 100% в свойства .menu, как это:

.menu {
            background-color: red;
            width: 100px;
            height: 100%
      }

, тогда высота меню уменьшается .Может кто-нибудь объяснить, почему это так?Если menu должен был наследовать высоту app, как в предыдущем случае, то почему высота записи: 100% предотвратила это?

Answer 1

Для первого случая речь идет о выравнивании flexbox по умолчанию, равном stretch.Таким образом, все элементы растягиваются, чтобы соответствовать высоте контейнера ¹ , таким образом, меню имеет ту же высоту, что и содержимое.Другими словами, самый высокий элемент будет определять высоту, а другой будет растягиваться, чтобы соответствовать этой высоте.

Измените выравнивание, и у вас больше не будет такого поведения:

html,
body {
  height: 100%;
}

.app {
  display: flex;
  align-items:flex-start; /*anything different from stretch*/
}

.menu {
  background-color: red;
  width: 100px;
  height:100%;
}

.content {
  flex: 1;
  border: 1px solid blue;
}

<div class="app">
  <div class="menu">menu</div>
  <div class="content">
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
  </div>
</div>

Добавив height:100%, вы теперь явно применяете высоту к элементу (растяжение больше не применяется), но это не приведет к значению auto (высотасодержимого), поскольку для родительского элемента не указана высота ²

html,
body {
  height: 100%;
}

.app {
  display: flex;
}

.menu {
  background-color: red;
  width: 100px;
  height:100%;
}

.content {
  flex: 1;
  border: 1px solid blue;
}

<div class="app">
  <div class="menu">menu</div>
  <div class="content">
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
  </div>
</div>

¹ Если свойство поперечного размера для гибкого элемента вычисляется как auto, и ни одно из полей поперечной оси не являетсяавто, гибкий элемент растянут .Используемое значение - это длина, необходимая , чтобы размер креста поля поля элемента был как можно ближе к тому же размеру, что и линия , при этом соблюдая ограничения, накладываемые min-height / min-width /max-height / max-width. ^ref

У нас есть только одна строка, поэтому она такая же, как и весь контейнер.

---

² Указывает процентную высоту.Процент рассчитывается относительно высоты блока, содержащего сгенерированный блок .Если высота содержащего блока не указана явно (то есть зависит от высоты содержимого), и этот элемент не является абсолютно позиционированным, значение вычисляется как 'auto' . ^ref

Добавьте высоту в приложение, и вы увидите, что происходит:

html,
body {
  height: 100%;
}

.app {
  display: flex;
  height:80%;
}

.menu {
  background-color: red;
  width: 100px;
  height:100%;
}

.content {
  flex: 1;
  border: 1px solid blue;
}

<div class="app">
  <div class="menu">menu</div>
  <div class="content">
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
  </div>
</div>

ОБНОВЛЕНИЕ

На основе комментариев приведен конкретный случай, когда процентная высотаработает без высоты, указанной в родительском элементе.

html,
body {
  height: 100%;
}

.app {
  display: flex;
  height: 80%;
}

.menu {
  background-color: red;
  width: 100px;
}

.container{
  flex: 1;
  background:green;
}

.test {
  height: 80%;
  border: 2px solid blue;
}

<div class="app">
<div class="menu">menu</div>
  <div class="container">
    <div class="test">percentage height is working here!! why??</div>
  </div>
</div>

Как я объяснил в предыдущем ответе высота .container не установлена ​​явно, но у нас нет циклическогозависимость, поскольку высота .container определяется поведением растяжения, а не его содержимым, поэтому браузер может сначала установить высоту .container, используя растяжение, а затем разрешить процентную высоту элемента .test.

эффект растяжения, браузер должен сначала найти высоту, основанную на контенте, и контент имеет высоту, основанную на контейнере, таким образом, у нас есть циклическая зависимость, которая сделает процентную высоту невыполненной до auto, чтобыопределить высоту контейнера.