0

Using flex for the main menu that has three boxes. The first and third do not flex, and the second grows to fill. The second box is a nested flex that has two boxes, the first does not flex and the second grows to fill. The nested flex, second box is configured to use ellipsis for overflow, but that did not work. The box expands and pushes the nested flex, but not the parent flex, beyond the parent max width. Then discovered if the second boxe has a defined width, any value, even 1px, it works as expected. Concerned and courious why that is, and if i'm doing something wrong.

Codepin to see in action: https://codepen.io/nws-jholmberg/pen/mdyEyWq

<div class="menu-container">
  <div class="menu">
    <div class="menu-item-1 menu-item">X</div>
    <div class="menu-item-2 menu-item">
      <div class="menu-search">
        <div class="menu-item-search-1">X</div>
        <div class="menu-item-search-2">The search result goes here and does not fit</div>
      </div>
    </div>
    <div class="menu-item-3 menu-item">X</div>
  </div>
</div>
<br>
<div class="menu-container">
  <div class="menu">
    <div class="menu-item-1 menu-item">X</div>
    <div class="menu-item-2 menu-item">
      <div class="menu-search">
        <div class="menu-item-search-1">X</div>
        <div class="menu-item-search-2 add-width">The search result goes here and does not fit</div>
      </div>
    </div>
    <div class="menu-item-3 menu-item">X</div>
  </div>
</div>

.menu-container {
  background-color: #f00;
  max-width: 200px;
}

.menu {
  display: flex;
}

.menu-item {
  margin: 4px;
}

.menu-item-1 {
  flex: none;
}

.menu-item-2 {
  flex: 1;
  background-color: #0ff;
}

.menu-item-3 {
  flex: none;
}

.menu-search {
  display: flex;
}

.menu-item-search-1 {
  flex: none;
  background-color: #3A3;
  color: #fff;
}

.menu-item-search-2 {
  flex: 1;
  background-color: #3F3;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;  
}

.add-width {
  width: 1px;
}
scader
  • 405
  • 3
  • 8
  • 19
  • You need `min-width: 0;` on `.menu-item-2` and you can get rid of width:1px. You are facing an issue related to min-width and how flex-basis is considered for nested flexbox – Temani Afif Dec 11 '19 at 22:51
  • added 2 duplicate, the first one to explain the fix and the second one to explain what is happening with your width:1px (in the bug section) – Temani Afif Dec 11 '19 at 22:55
  • Thanks, searched around for that information, but those two address the question of why. Appreciate the links. – scader Dec 11 '19 at 23:21

1 Answers1

0

there is 2 other hurtless ways you can use :

.menu-item-2 {
  flex: 1;
  background-color: #0ff;
  overflow:hidden;
}

or

.menu-item-2 {
  flex: 1;
  background-color: #0ff;
  min-width:0;
}

https://codepen.io/gc-nomade/pen/yLyJypm

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129