Clash Royale CLAN TAG

how to put a fixed element so that the text is put under it using flex box

I just did a flexbox course and I'm practicing. so this question would like to find the solution by applying flexbox concepts. in this case I have 2 articles, and I would like the second article to be always in that position and the text of the first article can be put under it. The size of each article is currently respected. how can I do it? This is my code:

<section>
<article class="box1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta dolorum ad perferendis eligendi inventore quo deserunt omnis impedit culpa blanditiis, sapiente pariatur a totam cumque, odit incidunt ipsum delectus provident. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit dignissimos, quos id rerum doloremque, dicta odio et perspiciatis officia dolorum amet quaerat doloribus ea sequi porro odit tenetur pariatur. Placeat.
</article>
<article class="box2">caja 2</article>
</section>

section{
height:400px;
width:100%;
display:flex;
flex-direction:row;
border: solid 1px black;
}

.box1{
background:red;
flex-grow:1;
}
.box2{
background:yellow;
align-self:flex-start;
flex-shrink:0;
}


https://jsfiddle.net/3ecoh9n1/

something like my image:

thanks

1 Answer
1

You cannot do such thing with flexbox, this is a use case of float:

section {
height: 400px;
border: solid 1px black;
}

.box1 {
background: red;
}

.box2 {
background: yellow;
float:right;
}

<section>
<article class="box2">caja 2</article>
<article class="box1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta dolorum ad perferendis eligendi inventore quo deserunt omnis impedit culpa blanditiis, sapiente pariatur a totam cumque, odit incidunt ipsum delectus provident. Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Reprehenderit dignissimos, quos id rerum doloremque, dicta odio et perspiciatis officia dolorum amet quaerat doloribus ea sequi porro odit tenetur pariatur. Placeat.
</article>
</section>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.