Content of nested flex child to constrain to calculated width of the child

readme.md

https://css-tricks.com/flexbox-truncated-text/

You need to set min-width:0 to the parent contiaining the child. This ensures that the content in the child does not dictate the width.

layout.html

<div class="flex-parent has-child">

  <div class="flex-child long-and-truncated-with-child-corrected">
    <h2>3. This is a long string that is OK to truncate please and thank you</h2>
  </div>
  
  <div class="flex-child short-and-fixed">
    <div></div>
    <div></div>
    <div></div>
  </div>
  
</div>

style.css

.flex-parent {
  display: flex;
  align-items: center;
  padding: 10px;
  margin: 30px 0;
}

h2 {
  font-size: 1rem;
  font-weight: normal;
}

.short-and-fixed {
  white-space: nowrap;
  > div {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: lightgreen;
    display: inline-block;
  }
}

.long-and-truncated-with-child-corrected {
  flex: 1;
  min-width: 0; /* or some value */
  h2 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

body {
  padding: 40px;
}

With min-widht: 0

without min-width set to 0