Why not work justify-content?

Here is the html:
<div class="third-row">
 <div class="orange-bg">
 <div class="flex">
 <h1>Creative<br> design<br> services</h1>
 <div class="black-item">
</div>
</div>
</div>
 </div>

Here is the CSS:
section.first .third-row {
 border-top: 1px solid black;
 border-bottom: 1px solid black;
 padding: 15px 0; }
 section.first .third-row .orange-bg {
 width: 100%;
 height: 375px;
 background: linear-gradient(145deg, #fd9b00, #e14f00); }
 section.first .third-row .orange-bg .flex {
 display: flex;
 flex-direction: column;
 justify-content: space-between; }
 section.first .third-row .orange-bg .flex h1 {
 font-size: 85px;
 font-family: nevisBold;
 color: #f4f4f4;
 text-transform: uppercase;
 line-height: 0.9; }
 section.first .third-row .orange-bg .flex .black-item {
 width: 440px;
 height: 40px;
 background: #090909; }

Why does not justify-content: space-between? Thus, when you remove flex-direction: column, then everything is fine. What is it GGG?
PS: the Css code is sloppy because I write with sass.
June 8th 19 at 17:06
1 answer
June 8th 19 at 17:08
Solution
It's a column, it is necessary to set the height. Otherwise it will calculate the padding between the elements?
Thank you! - Rachael.OHar commented on June 8th 19 at 17:11

Find more questions by tags HTMLCSSLayout