JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
  <div class="flex-item">
    <div class="block1">
    longlonglonglonglonglonglonglonglonglonglonglonglonglong
    </div>
  </div>
  <div class="flex-item">
    <div class="block2">
    Display
    </div>
  </div>
</div>
<br/>
<div class="parent">
  <div class="flex-item">
    <div class="block1">
    longlonglonglonglong...
    </div>
  </div>
  <div class="flex-item">
    <div class="block2">
    Display
    </div>
  </div>
</div>

CSS

.parent{
   display: flex;
   width: 15rem;
   padding: 10px;
   background: yellowgreen;
   /* overflow: hidden       <-- not necessary at this point */
   /* flex-direction: row    <-- default value; can be omitted */
}
.flex-item {
   /* width: 10em            <-- not necessary at this point */
   /* flex: 1 1 50%          <-- not necessary at this point */
   padding: 10px;
   background: yellow;
   display: flex;            /* new */
   min-width: 0;             /* see note #1 */

}
.block1 {
   width: 10em;
   overflow: hidden;         /* see note #2 */
   text-overflow: ellipsis;  /* see note #2 */
   white-space: nowrap;      /* see note #2 */
   background: red;
}
.block2 {
  background: orange;
}

/* .nos { flex-shrink: 0 !important; } */