Flexbox 要素の配置（HTML/CSS）

Flexboxを使って目標のように要素を配置したいのですがなかなかゆうことを聞いてくれません。

現在：

目標：

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="utf-8">
6  <title>Class 4 チャレンジ</title>
7  <link rel="stylesheet" href="styles.css" />
8</head>
9<body>
10  <ul class="chat-users-wrapper">
11    <li class="chat-user-wrapper is-active">
12      <div class="chat-user-avatar">
13        <img class="chat-user-avatar-image" src="./images/avatar4.png">
14      </div>
15      <div class="chat-user-main">
16        <div class="chat-user-main-upper">
17          <div class="chat-user-name">
18            ジェーン
19          </div>
20          <div class="last-chat-time">
21            15分前
22          </div>
23        </div>
24        <div class="last-chat-message">
25          こんにちは。
26        </div>
27      </div>
28    </li>
29    <li class="chat-user-wrapper">
30      <div class="chat-user-avatar">
31        <img class="chat-user-avatar-image" src="./images/avatar2.png">
32      </div>
33      <div class="chat-user-main">
34        <div class="chat-user-main-upper">
35          <div class="chat-user-name">
36            トム
37          </div>
38          <div class="last-chat-time">
39            1日前
40          </div>
41        </div>
42        <div class="last-chat-message">
43          こんにちは。
44        </div>
45      </div>
46    </li>
47    <li class="chat-user-wrapper">
48      <div class="chat-user-avatar">
49        <img class="chat-user-avatar-image" src="./images/avatar3.png">
50      </div>
51      <div class="chat-user-main">
52        <div class="chat-user-main-upper">
53          <div class="chat-user-name">
54            モニカ
55          </div>
56          <div class="last-chat-time">
57            3日前
58          </div>
59        </div>
60        <div class="last-chat-message">
61          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
62          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
63          aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
64        </div>
65      </div>
66    </li>
67    <li class="chat-user-wrapper">
68      <div class="chat-user-avatar">
69        <img class="chat-user-avatar-image" src="./images/avatar1.png">
70      </div>
71      <div class="chat-user-main">
72        <div class="chat-user-main-upper">
73          <div class="chat-user-name">
74            ケン
75          </div>
76          <div class="last-chat-time">
77            12月10日
78          </div>
79        </div>
80        <div class="last-chat-message">
81          こんにちは。
82        </div>
83      </div>
84    </li>
85  </ul>
86</body>
87</html>

CSS
1* {
2  box-sizing: border-box;
3}
4
5body, ul, li {
6  margin: 0;
7  padding: 0;
8}
9
10ul.chat-users-wrapper {
11  list-style: none;
12}
13
14.chat-users-wrapper {
15  height: 250px;
16  width: 360px;
17  overflow-y: scroll;
18  border: 1px solid #F4F4F4;
19}
20
21.chat-user-wrapper {
22  padding: 10px;
23  border-bottom: 1px solid #F4F4F4;
24  min-height: 75px;
25}
26
27.chat-user-wrapper.is-active {
28  background-color: #F4F4F4;
29}
30
31.chat-user-avatar {
32  margin-right: 15px;
33}
34
35.chat-user-avatar img {
36  border-radius: 50%;
37  height: 50px;
38  width: 50px;
39  background-color: #F4F4F4;
40}
41
42.last-chat-time, .last-chat-message {
43  font-size: 0.9em;
44  color: #9E9F9F;
45}

行動規範の内容に同意します

回答1件

ベストアンサー

下記でどうでしょうか。

css
1* {
2  box-sizing: border-box;
3}
4
5body, ul, li {
6  margin: 0;
7  padding: 0;
8}
9
10ul.chat-users-wrapper {
11  list-style: none;
12}
13
14.chat-users-wrapper {
15  height: 250px;
16  width: 360px;
17  overflow-y: scroll;
18  border: 1px solid #F4F4F4;
19}
20
21.chat-user-wrapper {
22  padding: 10px;
23  border-bottom: 1px solid #F4F4F4;
24  min-height: 75px;
25  display: flex; /*追加 横並び*/
26}
27
28.chat-user-wrapper.is-active {
29  background-color: #F4F4F4;
30}
31
32.chat-user-avatar {
33  margin-right: 15px;
34}
35
36.chat-user-avatar img {
37  border-radius: 50%;
38  height: 50px;
39  width: 50px;
40  background-color: #F4F4F4;
41}
42
43.last-chat-time, .last-chat-message {
44  font-size: 0.9em;
45  color: #9E9F9F;
46}
47/* 以下追加 */
48
49.chat-user-main {  
50  width: 255px;
51}
52
53.chat-user-main-upper {
54  display: flex;
55  justify-content: space-between;
56}
57/* 長いテキストを三点リーダー（…）で省略 */
58.last-chat-message {
59  width: 100%;
60  overflow: hidden;
61  text-overflow: ellipsis;
62  white-space: nowrap;
63}