How to display hr horizontally using flex?

Question

When using flexbox for styling, if the parent container is set to display: flex, this will result in it <hr />being displayed vertically rather than horizontally.

.container {
  display: flex;
  flex: 1;
}

<div class='container'>
  <h2>Test</h2>
  <hr />
</div>

Run code

Answer 1

Use flex-grow: 1or width: 100%to make it grow to fit the width of the parent. You probably want to use this in conjunction with flex-wrap: wrapon .containerif you plan to accommodate more flexible children in.container

.container {
  display: flex;
  flex: 1;
}

hr {
  flex-grow: 1;
  /* width: 100%; */ /* or this */
}

<div class='container'>
    <hr>
</div>

Run code

Answer 2

, align-items stretch, hr , flex-container h2. justify-content flex-start, hr 0.

- flex-wrap: wrap flex: 0 0 100% hr

.container {
  display: flex;
  flex-wrap: wrap;
}
hr {
  flex: 0 0 100%;
}

<div class='container'>
  <h2>Test</h2>
  <hr>
</div>