0

I am trying to get my flex items to shrink. As soon as I wrap the buttons (which do get smaller with correct overflow behavior) in an additional element, the buttons don' get smaller. I really can't understand why. Any help is appreciated!

button {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.breadcrumb-item {
  border: 1px dotted blue;
  display: flex;
}

.breadcrumb-wrapper {
  display: flex;
  border: 1px solid black;
}

.outer-container {
  border: 1px solid pink;
  width: 25%;
}
<h2>This does not work!</h2>

<div class="outer-container">
  <div class="breadcrumb-wrapper">
    <div class="breadcrumb-item">
      <button type="button">This button should shrink according to parent</button>
    </div>
    <div class="breadcrumb-item">
      <button type="button">This too</button>
    </div>
    <div class="breadcrumb-item">
      <button type="button">This also</button>
    </div>
  </div>
</div>

<h2>But this does!</h2>

<div class="outer-container">
  <div class="breadcrumb-wrapper">
    <button type="button">This button should shrink according to parent</button>
    <button type="button">This too</button>
    <button type="button">This also</button>
  </div>
</div>
Temani Afif
  • 211,628
  • 17
  • 234
  • 311
Yves Hary
  • 272
  • 1
  • 9
  • 1
    min-width: 0; to breadcrumb-item – Temani Afif May 23 '22 at 08:51
  • In the first instance you wrap your buttons in a div with breadcrumb-item which has a display of flex. This forces all the contents of the buttons to stay in the same line even when the window shrinks thus forcing the buttons to flow out of the parent container whose width is constrained to 25% of the window – narravabrion May 23 '22 at 09:18

0 Answers0