Как сделать элемент гибкости не заполнять высоту контейнера для гибких дисков?

Как вы можете видеть в приведенном ниже коде, левый div внутри контейнера flex растягивается, чтобы соответствовать высоте правого div. Есть ли атрибут, который я могу установить, чтобы сделать его высоту минимальным, необходимым для хранения его содержимого (например, обычные height: auto divs вне контейнеров flex)?

#a {
  display: flex;
}
#a > div {
  background-color: red;
  padding: 5px;
  margin: 2px;
}
#b {
  height: auto;
}

<div id="a">
  <div id="b">left</div>
  <div>right<br>right<br>right<br>right<br>right<br></div>
</div>

Ответ 1

Атрибут align-items или, соответственно, align-content контролирует это поведение.

align-items определяет расположение элементов перпендикулярно от до flex-direction.

По умолчанию flex-direction - row, поэтому вертикальное размещение можно контролировать с помощью align-items.

Существует также атрибут align-self для управления выравниванием для каждого элемента.

#a {
  display:flex;

  align-items:flex-start;
  align-content:flex-start;
  }

#a > div {
  
  background-color:red;
  padding:5px;
  margin:2px;
  }
 #a > #c {
  align-self:stretch;
 }

<div id="a">
  
  <div id="b">left</div>
  <div id="c">middle</div>
  <div>right<br>right<br>right<br>right<br>right<br></div>
  
</div>

Ответ 2

Когда вы создаете контейнер гибкого диска, в игру вступают различные правила гибкости по умолчанию.

Два из этих правил по умолчанию: flex-direction: row и align-items: stretch. Это означает, что элементы гибкости автоматически выравниваются в одной строке, и каждый элемент заполняет высоту контейнера.

Если вы не хотите, чтобы гибкие элементы растягивались – т.е., как вы писали:

сделать его высоту минимальным, необходимым для хранения его содержимого

... затем просто переопределите значение по умолчанию с помощью align-items: flex-start.

#a {
  display: flex;
  align-items: flex-start; /* NEW */
}
#a > div {
  background-color: red;
  padding: 5px;
  margin: 2px;
}
#b {
  height: auto;
}

<div id="a">
  <div id="b">left</div>
  <div>
    right<br>right<br>right<br>right<br>right<br>
  </div>
</div>