JSFiddle - React, Tailwind, and code Playground

by slikts

HTML

<div>
  <div class="wrapper" id="bar">
    <button>
      <div><span class="truncate">lorem ipsum</span></div>
    </button>
    <div class=wrapper>
      <button>
        <span class="truncate">lorem ipsum</span>
      </button>
      <button>
        <span class="truncate">lorem ipsum</span>
      </button>
    </div>
  </div>
</div>

CSS

.wrapper {
  display: flex;
}

.wrapper > * {
  min-width: 0;
}

.truncate {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
  display: inline-block;
  max-width: 100%;
}

button {
  border: 1px solid #f06;
}

#bar {
  width: 200px;
}