flexbox message

simple example

by kontrach

HTML

<ul class="thread">
  <li>
    <div class="message-block">
      <div class="image"></div>
      <div class="messages">
        <h3>Nikita Reshetniak</h3>
        <ul>
          <li>Привет</li>
          <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum corrupti laboriosam, similique eius illo deserunt, ratione atque voluptate expedita veritatis facere mollitia repellendus voluptatibus soluta, perspiciatis optio ut enim. Blanditiis.</li>
          <li>Покеда</li>
        </ul>
      </div>
    </div>
  </li>
  <li>
    <div class="message-block">
      <div class="image"></div>
      <div class="messages">
        <h3>Nikita Reshetniak</h3>
        <ul>
          <li>Привет</li>
          <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum corrupti laboriosam, similique eius illo deserunt, ratione atque voluptate expedita veritatis facere mollitia repellendus voluptatibus soluta, perspiciatis optio ut enim. Blanditiis.</li>
          <li>Покеда</li>
        </ul>
      </div>
    </div>
  </li>
</ul>

CSS

/* [start] reset styles */
ul, li{
  margin: 0;
  padding: 0;
  list-style: none;
}
h3{
  margin: .3em 0;
}

/* [end] reset styles */

.message-block{
  display: flex;
  justify-content: space-between;
}

.image{
  width: 100px;
  height: 100px;
  background-color: gray;
  /* border-radius: 50%; */
  flex: 0 0 100px;
}

.messages {
  flex: 0 1 83%;
}

.messages ul {
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
  /* align-content: flex-start; */
}

.messages li{
  padding: 7px 0;
  /* margin-left: 10px; */
}