Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div class="outside" style="float:left; margin-right:10px">
- <div class="parent">
- <div class="child">
- Align to the bottom 1
- </div>
- <div class="child">
- Align to the bottom 2
- </div>
- <div class="child">
- Align to the bottom 3
- </div>
- </div>
- </div>
- <div class="outside">
- <div class="parent">
- <div class="child">
- Align to the bottom 1
- </div>
- <div class="child">
- Align to the bottom 2
- </div>
- <div class="child">
- Align to the bottom 3
- </div>
- <div class="child">
- Align to the bottom 4
- </div>
- <div class="child">
- Align to the bottom 5
- </div>
- <div class="child">
- Align to the bottom 6
- </div>
- </div>
- </div>
- .outside
- {
- height:200px;
- width: 200px;
- border: 4px solid green;
- overflow-y:auto;
- }
- .parent
- {
- height: 100%;
- width: 200px;
- display: flex;
- flex-direction: column;
- justify-content:flex-end;
- overflow-y:auto;
- }
- .child
- {
- height: 40px;
- width: 100%;
- background: #f00;
- flex: 0 0 auto;
- }
- .child:nth-child(odd)
- {
- background: red;
- }
- .child:nth-child(even)
- {
- background: blue;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement