<!doctype html><style>
* { border: 1px solid black; }
html { background: white; }
.flex {
display: flex;
flex-wrap: wrap;
background: pink;
width: 500px;
}
.item {
display: flex;
background: orange;
width: 100%;
height: 50px;
}
.one {
flex: 1;
}
.two {
flex: 1 1;
}
</style>
<div class="flex">hello<div class="item one">friends</div></div>
<div class="flex">hello<div class="item two">friends</div></div>