flex-text-containers

by Nic Fontaine

HTML

<section>
  <article>
    <div class="row">
      <div class="no">1</div>
      <div class="heading">Heading Text:</div>
      <div class="text">Orci varius natoque penatibus</div>
    </div>
    <div class="row">
      <div class="no">2</div>
      <div class="heading">Ipsum:</div>
      <div class="text">Sed interdum id turpis at placerat, quisque a.</div>
    </div>
    <div class="row">
      <div class="no">3</div>
      <div class="heading">Longer Heading Overflow:</div>
      <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    </div>
  </article>
  <article style="min-width: 200px;">
  Sed interdum id turpis at placerat. Quisque a enim et odio luctus tincidunt. Maecenas vel massa ligula. Quisque diam libero, dictum vel consequat vitae, pretium nec urna.
  </article>
</section>

CSS

body {
  margin: 0;
  font-family: monospace;
}

section {
  display: flex;
  flex-wrap: wrap;
}

article {
  flex: 1;
  padding: 1rem;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1px;
}

.row > div {
  padding: 0.3rem;
}

.row .no {
  padding-right: 1rem;
  background: #dfdfdf;
}

.row .heading {
  flex: 0 0 150px;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
  white-space: nowrap;
  padding-right: 1rem;
  background: #f5e8f5;
}

.row .text {
  background: #f5f5e8;
  flex: 1;
  min-width: unset;
}