Grow Flexbox items from the bottom-CodePudding

I can't believe I am asking this because it must be quite simple. But am working in react-native and have to use flexbox I think for this, but I am open to suggestions.

*** I realize react native would be using Views and not Divs but this question is really about flexbox and I will not be able to use grid for this. Although I am curious how it would be done in grid also

With the following markup:

<div >
  <div >icon button number one</div>
  <div >an even larger text with stuff in it
two</div>
  <div >a large bit of text three</div>
</div>

and css:

.container {
  display: flex;
  background-color: yellow;
  width: 500px;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  border: 3px black solid;
}
.icon {
  padding: 10px;
  background-color: black;
  color: white;
  margin: 10px;
}

I am hoping to dynamically be able to grow this 'list' of buttons from the bottom.

As it stands the divs inside the container line up like this

<an even larger text with stuff in it two> <icon button number one>
                                        <a large bit of text three>

But I want them to line up like this:

                                        <a large bit of text three>
<an even larger text with stuff in it two> <icon button number one>

How do I get the items to grow from the bottom up when they will eventually be added dynamically?

https://codepen.io/sias/pen/ZEjmXBj

CodePudding user response：

hope this is what you want wrap reverse just upside down and start and end swapped

.container {
  display: flex;
  justify-content:flex-end;
  background-color: yellow;
  width: 500px;
  flex-wrap: wrap-reverse;
  border: 3px black solid;
  
}
.icon {
  padding: 10px;
  background-color: black;
  color: white;
  margin: 10px;
}

CodePudding user response：

Like this?

body, html {
  height: 100%;
}
.container {
  display: flex;
  justify-content: flex-end;
  width: 500px;
  flex-flow: column;
  height: 100%;
  outline: 3px black dotted;

}
.icon {
  margin-top: 12px;
  background-color: black;
  color: white;

}

<div >
  <div >icon button number one</div>
  <div >an even larger text with stuff in it
two</div>
  <div >a large bit of text three</div>
</div>