CSS | Inline Flex Container

by Zoltan Boros

HTML

<div class="container">
  <div class="item">
    <svg class="icon" viewBox="0 0 200 200">
      <polygon class="shape1" stroke="none" points="50,0 100,100 0,100" />
      <circle class="shape2" stroke="none" cx="100" cy="100" r="50" />
      <rect class="shape3" stroke="none" x="100" y="100" width="100" height="100" />
    </svg>
    <div class="label">Foo Bar</div>
  </div>

  <div class="item someOtherContext1">
    <svg class="icon" viewBox="0 0 200 200">
      <polygon class="shape1" stroke="none" points="50,0 100,100 0,100" />
      <circle class="shape2" stroke="none" cx="100" cy="100" r="50" />
      <rect class="shape3" stroke="none" x="100" y="100" width="100" height="100" />
    </svg>
    <div class="label">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  </div>

  <div class="item someOtherContext2">
    <svg class="icon" viewBox="0 0 200 200">
      <polygon class="shape1" stroke="none" points="50,0 100,100 0,100" />
      <circle class="shape2" stroke="none" cx="100" cy="100" r="50" />
      <rect class="shape3" stroke="none" x="100" y="100" width="100" height="100" />
    </svg>
  </div>
</div>

CSS

* {
  color: #222;
  font-family: sans-serif;
  box-sizing: border-box;
}

.container {
  max-width: 400px;
  border: 2px dashed #ddd;
}
.item {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  padding: 0 0.5rem;
  height: 2rem;
  border: 2px solid #aae;
}
.item:not(:last-child) {
  margin-bottom: 0.5rem;
}
.icon {
  flex-shrink: 0;
  height: 60%;
  fill: #aae;
}
.item > :not(:last-child) {
  margin-right: 0.5rem;
}
.label {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.shape1 {
  fill: #f00;
}
.shape2 {
  fill: #0f0;
}
.shape3 {
  fill: #00f;
}
.someOtherContext1 .shape1 {
  fill: #bbb;
}
.someOtherContext1 .shape2 {
  fill: #888;
}
.someOtherContext1 .shape3 {
  fill: #111;
}

.item.someOtherContext2 {
  height: 4rem;
}
.someOtherContext2 .shape1 {
  fill: #00f;
}
.someOtherContext2 .shape2 {
  fill: #88f;
}
.someOtherContext2 .shape3 {
  fill: #bbf;
}