<hr> внутренний контейнер с дисплеем flex поврежден

Такое поведение немного странно и странно. Если есть контейнер со свойством display, установленным в flex и flex-direction, на column, ориентация элементов <hr> внутри него изменится и станет вертикальной, а ее высота уменьшится, чтобы она соответствовала высоте линии.

html, body {
  height: 100%;
}
body {
  font-family: sans-serif;
}
.container {
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

<div class="container">
  <h3>Title</h3>
  <hr/>
  <div class="content">
    <p>This is some content</p>
  </div>
</div>

Ответ 1

В соответствии с HTML5 Rendering - элемент hr ожидается, что он будет отображаться с помощью этого стиля:

hr { color: gray; border-style: inset; border-width: 1px; margin: 0.5em auto; }

В частности, обратите внимание на margin-left: auto, margin-right: auto.

Эти стили используются для центрирования элемента блока по горизонтали. Согласно Вычисление ширины и полей - Блок

Если оба margin-left и margin-right равны auto, их используемые значения равны. Это горизонтально центрирует элемент по отношению к краев содержащего блока.

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

В Flexbox он похож: по умолчанию align-self: auto и align-items: stretch заставляют гибкие элементы расти, чтобы покрыть гибкую линию на поперечной оси (горизонтальную в макете столбца), а auto поля также могут для центра.

Однако существует большая разница: согласно Определение кросс-размера, align-self: stretch не влияет на элементы flex с полями auto:

Если элемент flex имеет align-self: stretch, его вычисленный кросс-размер свойство auto, и ни одно из полей кросс-оси не имеет значения auto, используемый внешний размер креста - это используемый поперечный размер его гибкой линии, зажаты в соответствии с минимальными и максимальными свойствами кросс-элементов. В противном случае используемым кросс-размером являются элементы гипотетический крест размер.

Затем вы можете исправить эту проблему, удалив поля auto:

hr {
  margin-left: 0;
  margin-right: 0;
}

.container {
  padding: 20px;
  display: flex;
  flex-direction: column;
}
hr {
  margin-left: 0;
  margin-right: 0;
}

<div class="container">
  <h3>Title</h3>
  <hr />
  <div class="content">
    <p>This is some content</p>
  </div>
</div>

Ответ 1

Ответ 2