Fitting child into parent

by

An initial setting on flex items is min-width: auto. This means that flex items cannot be shorter than the width of their content.

You have white-space: nowrap on the text element. As a result, all flex item ancestors must expand (in a domino effect) to accommodate the length of the text.

The affected flex items are:

  • .list-component
  • .header-container
  • .header-text

Therefore, in order to prevent the text from overflowing the primary container, you need to override the min-width: auto default. The flexbox spec provides two methods for doing this:

  1. Add min-width: 0 to flex items
  2. Add overflow with any value other than visible to flex items. (This is why you were able to fix the problem by adding overflow: hidden. It’s actually a clean and valid solution.)

This behavior is explained in more detail in this post: 

.list-header {
  display: flex;
  width: 150px;
  height: 80px;
  background-color: #ececec;
}

.list-component {
  display: flex;
  flex: 1;
  padding-left: 24px;
  padding-right: 24px;
  min-width: 0;         /* NEW */
}

.header-container {
  display: flex;
  flex: 1;
  min-width: 0;         /* NEW */
}

.header-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;         /* NEW */
}

span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
<div class="list-header">
  <div class="list-component">
    <div class="header-container">
      <div class="header-text">
        <span>long long long long long long text</span>
      </div>
    </div>
  </div>
</div>

More Related Contents:

  1. Targeting flex items on the last or specific row
  2. Can’t scroll to top of flex item that is overflowing container
  3. Fill the remaining height or width in a flex container
  4. How to vertically align text inside a flexbox?
  5. Equal height children of flex items
  6. flex-grow not sizing flex items as expected
  7. How to Right-align flex item?
  8. How to remove the space between inline/inline-block elements?
  9. flex container min-height ignored in IE
  10. Maintain image aspect ratio when changing height
  11. float does not work in a flex container
  12. How can I have two fixed width columns with one flexible column in the center?
  13. How can I make my flexbox layout take 100% vertical space?
  14. Is there a way to remove a div but keep its elements?
  15. All widths set to width of widest element
  16. Make flex items overlap
  17. 5 items per row, auto-resize items in flexbox
  18. flex-grow not working in column layout
  19. CSS – How to have children in different parents the same height?
  20. Why does flexbox stretch my image rather than retaining aspect ratio?
  21. Aligning elements left and center with flexbox
  22. How to make a sticky footer using flexbox in IE11?
  23. Height of flex container not working properly in Safari
  24. Flexbox, z-index & position: static: Why isn’t it working?
  25. Pin a flex item to the bottom of the container
  26. Aligning to the bottom in flexbox
  27. How to make a flex item not fill the height of the flex container? [duplicate]
  28. Alignment of content vertically in adjacent flexbox containers
  29. Making a flex item float right
  30. Flex elements ignore percent padding in Firefox

Leave a Comment