根据每个内容大小，使div从底部到顶部增长

Question

我有一个小小的小提琴进行测试：

＆＃13;

＆＃13;

.wrapper {
        display: flex;
      flex-direction: column;
      min-height: 50vh;
      width: 600px;
      border: 1px solid red;
      padding: 1em;
    }

    .content-one {
      border: 1px solid green;
        display: flex;
    }

    .content-two {
      border: 1px solid blue;
        display: flex;
    }

＆＃13;

<div class="wrapper">

<div class="content-one">

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

</div>

<div class="content-two">

 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>

＆＃13;

＆＃13;

＆＃13;

但是我无法弄清楚我是如何根据其内容高度从底部到顶部生长两个div的。

如果我只有一个内容容器，那么没问题，但是如果我的包装器中有两个动态增长的div需要从下向上扩展呢？

Answer 1

尝试在你的包装类中添加以下css

.wrapper {
        display: flex;
        flex-direction: column;
        min-height: 50vh;
        width: 600px;
        border: 1px solid red;
        padding: 1em;
        justify-content: flex-end;
    }