How to set display property in flex css - css

Question

I am trying to change below the CSS to flex but not working. instead of display block and width 100%, I want to do in flex. What is the equal of display block and width 100% in flex?
h1,
h2 {
font-family: Lato;
}
div {
display: flex;
flex-direction: row;
align-items: flex-end;
}
.test1 {
display: flex;
flex-direction: column;
align-items: flex-start;
background-color: #3fd819;
}
.test2 {
background-color: rgb(122, 117, 202);
margin: 5px;
width: 100%;
display: block;
}
.container {
position: relative;
display: inline-block;
flex-direction: column;
}
<div class="container">
<div>
<div class="test1">
<div class="test2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book.
</div>
</div>
</div>
</div>

Answer 1

You're over-thinking it. Assuming you can't change the markup, all you need is this:
.test1 {
border: 5px solid #3fd819;
background-color: rgb(122, 117, 202);
}
.test2 {
display: contents;
}
<div class="container">
<div>
<div class="test1">
<div class="test2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book.
</div>
</div>
</div>
</div>
If you anticipate having multiple .test2 children of div.test1 and you want them stacked vertically, then that's also simple:
.test1 {
border: 5px solid #3fd819;
background-color: rgb(122, 117, 202);
}
.test2 {
margin: 1em;
}
<div class="container">
<div>
<div class="test1">
<div class="test2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book.
</div>
<div class="test2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book.
</div>
<div class="test2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book.
</div>
</div>
</div>
</div>