使用Flex在元素旁边显示元素

Question

我的类为user-list的div元素正显示在.result下方，但应放在其旁边。

我用float: left进行了尝试，但是没有用。我该如何使用flex呢？

.chat {
  position: relative;
  left: 10vw;
  height: 95vh;
  background-color: burlywood;
  width: 80vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.result {
  width: 80vw;
  height: 80vh;
  float: left;
  background: red;
}

.user-list {
    background-color: #F1F1F4;
    float: left;
    height: 100%;
    overflow: auto;
    width: 200px;
}

<div class="chat">

  <div class="result"></div>

  <div class="user-list">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia delectus, voluptatum ducimus ratione nemo dolor consequuntur maiores corrupti rerum architecto qui necessitatibus nulla, deserunt harum quaerat facere, eius et minus.
  </div>
</div>

Answer 1

在flex-direction: row元素上使用flex-direction: column代替.chat。