Width of a flex item doesn't change when I use % - html

Question

As far as I know, width of a flex item adjusts to its content(when flex-direction: row;).
Here you see, the width of second .item is too long even though I set the width of h1 to 50%.
* {
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: space-between;
border: 2px solid red;
padding: 10px;
}
.item {
border: 1px solid black;
}
.test {
width: 50%;
}
<div class="container">
<div class="item">Lorem ipsum dolor sit amet.</div>
<div class="item">
<h1 class="test">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi,
quo.
</h1>
</div>
</div>
But when I use px instead of %, the result that I wanted comes out. (Please view it in a full page)
* {
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: space-between;
border: 2px solid red;
padding: 10px;
}
.item {
border: 1px solid black;
}
.test {
width: 400px;
}
<div class="container">
<div class="item">Lorem ipsum dolor sit amet.</div>
<div class="item">
<h1 class="test">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi,
quo.
</h1>
</div>
</div>
I can't understand how % is calculated in the first code. Can somebody help? Thanks

Answer 1

You have to apply the width on the .item element.
* {
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: space-between;
border: 2px solid red;
padding: 10px;
}
.item {
border: 1px solid black;
}
.item:nth-child(2) {
width: 50%;
}
<div class="container">
<div class="item">Lorem ipsum dolor sit amet.</div>
<div class="item">
<h1 class="test">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, quo.
</h1>
</div>
</div>

Answer 2

You are not applying 50% to children (.item) but rather to (.test), which is not child of display:flex. Fix it and you'll get result!
* {
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: space-between;
border: 2px solid red;
padding: 10px;
}
.item {
border: 1px solid black;
width: 50%;
}
.test {
background: yellow;
}
<div class="container">
<div class="item">Lorem ipsum dolor sit amet.</div>
<div class="item">
<h1 class="test">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi,quo. </h1>
</div>
</div>