CSS flex wrap & ellipsis

Dependeing of the flex direction

by Julien Roche

HTML

<div class="main main--row-mode">
  <section class="main__block">
    <div class="main__block__left">AAAAAAAA</div>
    <div class="main__block__right">BBBBBBBB</div>
  </section>

  <section class="main__block">
    <div class="main__block__left">AAAAAAAA</div>
    <div class="main__block__right">BBBBBBBB</div>
  </section>

  <section class="main__block">
    <div class="main__block__left">AAAAAAAA</div>
    <div class="main__block__right">BBBBBBBB</div>
  </section>

  <section class="main__block">
    <div class="main__block__left">AAAAAAAA</div>
    <div class="main__block__right">DDDDDDDDDDDDDDDDDDDDDDDD</div>
  </section>

  <section class="main__block">
    <div class="main__block__left">AAAAAAAA</div>
    <div class="main__block__right">BBBBBBBB</div>
  </section>

  <section class="main__block">
    <div class="main__block__left">AAAAAAAA</div>
    <div class="main__block__right">CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</div>
  </section>
</div>

<br />
<br />

<div class="main main--column-mode">
  <section class="main__block">
    <div class="main__block__left">AAAAAAAA</div>
    <div class="main__block__right">BBBBBBBB</div>
  </section>

  <section class="main__block">
    <div class="main__block__left">AAAAAAAA</div>
    <div class="main__block__right">BBBBBBBB</div>
  </section>

  <section class="main__block">
    <div class="main__block__left">AAAAAAAA</div>
    <div class="main__block__right">BBBBBBBB</div>
  </section>

  <section class="main__block">
    <div class="main__block__left">AAAAAAAA</div>
    <div class="main__block__right">DDDDDDDDDDDDDDDDDDDDDDDD</div>
  </section>

  <section class="main__block">
    <div class="main__block__left">AAAAAAAA</div>
    <div class="main__block__right">BBBBBBBB</div>
  </section>

  <section class="main__block">
    <div class="main__block__left">AAAAAAAA</div>
    <div...

CSS

html,
body {
  border: none;
  height: 100%;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  width: 100%;
}

.main {
  border: 1px solid green;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  min-height: 0px;
  min-width: 0px;
}

.main--column-mode {
  flex-direction: column;
}

.main--row-mode .main__block {
  max-width: calc(100% - 2px); /* To restrict the element due to the wrap mode (more complicated than column) */
  /* NOTA BENE: the calc with 2px is due to the border */
}

.main__block {
  border: 1px solid red;
  display: inline-flex;
  flex: 1 0 auto;
}

.main__block__left {
  background-color: grey;
  flex: 1 1 auto;
}

.main__block__right {
  background-color: yellow;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}