miao/qq-mail-flex.html at main · BruceZhang-Pro/miao · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            box-shadow: inset 0 0 1px red;
            background-color: rgb(0, 0, 0, 0.08);
            box-sizing: inherit;
        }
        html {
            box-sizing: border-box;
        }
        html, body {
            margin: 0;
            height: 100%;
        }
        .main-page {
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            height: 100%;
        }
        header {
            flex-basis: 100px;
            flex-grow: 0;
            flex-shrink: 0;
            overflow: auto;
            /* background-color: rgb(95, 158, 160); */
        }
        .main-flex {
            display: flex;
            flex-wrap: nowrap;
            flex-basis: 700px;
            flex-grow: 1;
            flex-shrink: 1;
            overflow: auto;
        }
        aside {
            width: 200px;
            overflow: auto;
            flex-grow: 0;
            flex-shrink: 0;
            /* background-color: rgb(160, 82, 45); */
        }
        main {
            flex-basis: 200px;
            overflow: auto;
            flex-grow: 1;
            flex-shrink: 1;
            /* background-color: rgb(0, 128, 128); */
        }
    </style>
</head>
<body>
    <div class="main-page">
        <header>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis nostrum dignissimos eum assumenda quibusdam, veritatis, ipsa magnam ducimus est sed doloribus, nisi enim aliquam qui vero hic quia laudantium illo.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio vel libero necessitatibus quaerat qui, laudantium in ad ut? Explicabo, ad minima doloribus voluptas architecto ipsum tempora officia vero corrupti laboriosam?</header>
        <div class="main-flex">
            <aside>
                <ul>
                   <li>1</li>
                   <li>2</li>
                   <li>3</li>
                   <li>4</li>
                   <li>5</li>
                   <li>6</li>
                   <li>7</li>
                   <li>8</li>
                   <li>9</li>
                   <li>10</li>
                   <li>11</li>
                   <li>12</li>
                   <li>13</li>
                   <li>14</li>
                   <li>15</li>
                   <li>16</li>
                   <li>17</li>
                   <li>18</li>
                   <li>19</li>
                   <li>20</li>
                   <li>21</li>
                   <li>22</li>
                   <li>23</li>
                   <li>24</li>
                   <li>25</li>
                   <li>26</li>
                   <li>27</li>
                   <li>28</li>
                   <li>29</li>
                   <li>30</li>
                   <li>31</li>
                   <li>32</li>
                   <li>33</li>
                   <li>34</li>
                   <li>35</li>
                   <li>36</li>
                   <li>37</li>
                   <li>38</li>
                   <li>39</li>
                   <li>40</li>
                   <li>41</li>
                   <li>42</li>
                   <li>43</li>
                   <li>44</li>
                   <li>45</li>
                   <li>46</li>
                   <li>47</li>
                   <li>48</li>
                   <li>49</li>
                   <li>50</li>
                </ul>
            </aside>
            <main>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo dolore temporibus, totam inventore veniam delectus voluptatibus in alias neque, quaerat fugiat. Mollitia, unde odio doloremque nulla quisquam neque dolore iste!
                Quae, at cum. Qui, adipisci! Fugiat repellendus aspernatur quidem temporibus inventore modi minus iure dolores facilis, quis officia consequatur voluptatum ex, eius vel sint maxime, nihil itaque eum numquam quas?
                Veniam iste laboriosam iure suscipit quidem quibusdam sed iusto tempore eaque vitae rerum perspiciatis, tenetur culpa quis expedita veritatis placeat ad sequi distinctio quo error officia. Sequi quas nisi commodi.
                Pariatur quos perferendis assumenda commodi voluptates fugiat, dolore nisi voluptatum doloribus eos autem iure et nihil consectetur voluptate aperiam quis, quasi unde rerum provident minus vitae. Pariatur consequatur laborum ipsum.
                Sint, eligendi doloremque? Nisi quod suscipit ipsum nihil aliquam velit neque porro adipisci perspiciatis aliquid omnis, voluptatem excepturi ab nesciunt voluptates consectetur fuga est eius, provident praesentium recusandae corporis. Non?
                Nemo distinctio harum suscipit dignissimos ipsam? Corporis sapiente rem odio cumque cum natus totam, repellat molestias eligendi dolorum! Ipsa ut quibusdam laudantium minus sed quo dicta est delectus, porro alias?
                Provident id fuga amet earum numquam incidunt? Expedita ipsa consectetur quis beatae porro officia veritatis deleniti ducimus non nesciunt voluptatibus, nisi hic rerum, optio tempora, voluptatem quo odio nihil. Dolor.
                Distinctio tenetur provident ipsum repellat? Explicabo consequatur similique iure maxime assumenda animi quisquam optio modi numquam inventore, dolorem blanditiis vero quaerat ut, ipsum amet natus sunt? Excepturi eum ex culpa.
                Vel laudantium quos sequi laborum optio culpa excepturi eum doloribus nisi quas. Quis, eius eaque totam aspernatur itaque unde similique? Repellat aliquid delectus placeat nulla officiis expedita! Corrupti, ullam dolore.
                Quaerat minus voluptate qui provident quas natus suscipit ipsum ipsa dolores, ad vitae reprehenderit aliquid, adipisci officia odio quae eius pariatur magni laboriosam optio hic amet asperiores perferendis. Placeat, soluta.Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic sit perferendis tempore, rerum est commodi quam pariatur iste fuga animi nisi quis modi rem! Voluptatem fuga totam doloremque nobis fugiat.
                Natus velit nemo accusantium a accusamus itaque quasi omnis praesentium voluptas culpa deleniti possimus nisi nostrum, amet nulla expedita. Sit ipsa repellat alias. Iusto nobis, iure sapiente culpa id asperiores?
                Aspernatur praesentium ut reprehenderit doloribus iste perspiciatis consectetur dolores adipisci aliquam laboriosam minima natus exercitationem sint dicta nulla cupiditate itaque, saepe voluptatem. Sint illo officiis fuga nesciunt accusamus ab fugiat.
                Minus dolores aperiam vitae voluptate assumenda obcaecati consequuntur libero sit ducimus veritatis explicabo, cupiditate voluptas aliquid in facilis rerum enim id? Numquam, corporis quibusdam! Debitis maxime pariatur assumenda nam consectetur.
                Maxime dolor numquam, fuga id corrupti, quidem cumque quae rem quas velit, quod possimus harum cupiditate molestiae voluptas animi optio. Odio facere pariatur doloremque placeat reiciendis, maiores earum hic blanditiis.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vel eos cum sit et quaerat sunt perspiciatis perferendis enim! Id nulla iste quo expedita quaerat provident fugit delectus aut soluta tenetur.Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa repellendus architecto nemo ullam voluptates molestiae, eum ab maxime ad rerum, fugiat nam ipsam dolorum incidunt temporibus quos minus dolore. Quibusdam?
                Necessitatibus, excepturi nihil. Sunt illo dignissimos deleniti accusamus, possimus aliquid dolores provident beatae ipsam facilis laudantium quis error numquam repellat, corporis non vel eaque. Facilis maxime corrupti similique reprehenderit maiores?
                Voluptatum, laboriosam voluptatem a consequuntur quasi possimus numquam perspiciatis obcaecati asperiores ut nemo atque vitae aliquid totam itaque ipsum suscipit sit voluptatibus ipsa distinctio rem pariatur quisquam? Odio, nesciunt dolore?
                Consequuntur quo ratione suscipit commodi quam cupiditate possimus id laborum, dolorum alias aliquam quae nostrum minus facilis tenetur earum. Quas, magni dolor veniam fugiat iure facere ex. Perferendis, maxime ipsam.
                Amet debitis dolor vel similique molestias eligendi iste, temporibus quisquam, odio cupiditate obcaecati, eveniet officia! Esse dolorem amet aut quibusdam omnis, explicabo magnam perspiciatis beatae eius quaerat modi accusamus voluptatum?
                Inventore unde error consequuntur possimus minus repellat dolor. Doloremque et voluptate accusantium architecto voluptas quibusdam, quia odio dolore voluptatibus eum repellat iste cum enim sequi, soluta officiis quaerat nam adipisci.
                Odio non praesentium aut provident pariatur aperiam, dolor corrupti, iusto nemo ullam voluptas totam amet voluptatem eum nesciunt veniam suscipit, hic eius unde corporis. Autem accusantium excepturi in expedita assumenda.
                Fugiat sunt assumenda tempore in eos aliquam quibusdam expedita est repellat vero eum quam, ullam, reiciendis ad sequi laudantium! Quia maiores eaque nostrum nulla veniam illo voluptatibus consequuntur odio enim!
                Facilis exercitationem enim voluptas totam labore provident temporibus eum rem hic beatae ab eaque cumque quia amet maxime libero ipsum minima repellat, incidunt ea vitae, architecto dolor ratione? Laborum, pariatur.
                Id voluptatibus numquam quo facere ad illo explicabo, officia laborum illum earum sequi mollitia ipsum saepe eaque at, non ut voluptatem similique architecto? Corporis harum corrupti laudantium impedit dolor reiciendis!
                Nobis maxime totam eveniet quos fuga tempore odio blanditiis ab quibusdam ad, iste consequuntur, id possimus suscipit necessitatibus impedit nemo tempora inventore non illo minus eius dignissimos quia? Aperiam, natus!
                Fugiat, beatae quaerat! Perferendis laudantium deserunt suscipit beatae quo, est sapiente porro. Dicta similique unde molestias debitis numquam architecto quo voluptate, odio, fugiat autem minus eius saepe mollitia ratione cupiditate!
                Dignissimos totam, doloremque saepe quisquam ullam ducimus assumenda aliquid corporis. Molestias est eos, vel libero consectetur eveniet quo? Rerum, tempore quis. Voluptate harum ut soluta assumenda maxime ex sequi illum!
                Voluptates quibusdam exercitationem earum impedit deserunt qui tenetur incidunt numquam modi, voluptas porro provident, dolorem nesciunt in, libero assumenda a ut recusandae consequuntur unde repudiandae minus accusamus facere sequi. Beatae!
                Ut ipsam nostrum, porro rem labore quasi beatae et. Quibusdam aut alias totam soluta ex reiciendis dolore repudiandae quis atque praesentium magni laboriosam laudantium error dolores ad, quaerat eaque voluptas?
                Ipsum repudiandae ipsam tempora voluptates, earum nesciunt. Consectetur ipsum natus omnis. Maiores, enim libero quo ad architecto sit blanditiis doloribus tempore earum quia dicta ipsum quidem pariatur animi sint sunt.
                Corrupti ad blanditiis ab ipsum. Quia in magnam quas? Totam sunt dolorem vel sed natus animi suscipit enim accusamus neque architecto laudantium, exercitationem velit corrupti est repudiandae ipsum! Esse, fugiat.
                Voluptates id delectus beatae molestiae soluta minus eligendi tempore, doloremque quae omnis ratione expedita error ipsam, repudiandae sunt, voluptas assumenda! Expedita molestias inventore repellat placeat unde ab, voluptatum sunt veniam.
                Doloremque, quaerat? Quidem, natus nisi! Rerum expedita adipisci sequi non commodi repellendus cupiditate deleniti quo nisi officia aperiam voluptatibus sit debitis voluptas omnis laboriosam magnam iure, magni nulla placeat voluptatem!
                Culpa vel suscipit et. Adipisci incidunt iusto alias, a nisi ducimus, debitis veritatis vel eum tempora ex inventore assumenda rerum eveniet illo maxime blanditiis aperiam magni rem voluptates! Ex, natus.
                Praesentium, exercitationem deserunt. Expedita nobis dolorum suscipit assumenda dignissimos rem eius accusamus veniam ut reprehenderit, sed illum fugit animi nulla possimus vel reiciendis tempore ducimus minima fuga? Expedita, nihil atque.
                Perferendis voluptates sunt soluta reiciendis eveniet commodi, magnam rem impedit voluptatibus velit dicta placeat assumenda tempore laudantium distinctio fugit nesciunt veritatis aspernatur totam quaerat quisquam temporibus corrupti reprehenderit dolorem? Officiis!
                Reprehenderit earum quo hic libero aliquid laudantium sapiente sed nemo ipsam. Nobis unde id nam alias ipsam repellat, odio adipisci architecto quidem nisi nulla! Magnam corporis quam labore debitis nam.
                Provident sed ex quis praesentium dolorem? Reprehenderit nisi iste excepturi, consequuntur sequi esse ipsam totam rerum repellat fuga officia corporis commodi deserunt saepe pariatur explicabo sapiente velit corrupti labore. Ratione.
                Voluptatibus, minima quidem in error quae numquam, tempore alias ipsam ullam quod esse maxime blanditiis, nesciunt nulla commodi expedita est vero fuga placeat. Ab, magnam soluta quod accusantium eligendi molestias.
                Tempore, itaque ea sequi architecto facere debitis, pariatur et dolore ratione optio aut assumenda molestias! Repudiandae, est. Neque error itaque fuga, dolorem qui provident numquam nostrum, voluptatum, temporibus eaque sunt?
                Commodi quo non a corrupti neque aut deleniti doloribus quia ad error. Minus iusto doloribus soluta, recusandae nesciunt laudantium doloremque vero harum voluptates voluptas facere, quo fugiat suscipit voluptate. Molestiae?
                Molestias tempore deleniti est ex, itaque voluptates recusandae unde consequuntur enim possimus repellendus odio. Ipsam labore libero consequatur quidem molestias eaque exercitationem veniam corrupti, dolorum possimus voluptatibus et sapiente cum?
                Cum molestias dicta quia nihil! Accusantium nam voluptatibus debitis, modi maiores at suscipit incidunt reiciendis vel sed ratione saepe harum neque tempore ipsa unde corporis beatae ex sapiente, omnis ipsam!
                Repudiandae eveniet nobis, quam voluptatem tempore esse consequuntur, dicta voluptatibus veniam atque autem cum maiores eligendi maxime nihil dolor neque sed vel pariatur, sunt eaque blanditiis! Illo itaque adipisci nulla.
            </main>
        </div>
    </div>
</body>
</html>