2

Child flex item is overflowing the width of the parent container. I tried setting min-width:0 as well but still it is not working.

Here is my HTML and CSS code :

.parent{
  display: flex;
  border: 2px solid red;
}

.child1{
  background: cyan;
  height: 40px;
  width: 40px;
  flex-shrink: 0;
}

.child2 {
  background: pink;
  height: 20px;
  width: 20px;
}

.child3 {
  background: yellow;
  height: 20px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<div class='parent'>
  <div class='child1'>1</div>
  <div>
    <div class='child2'>2</div>
    <div class='child3'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus sagittis odio, ac pulvinar tortor sagittis et. In hac habitasse platea dictumst. Phasellus ut velit dolor. Vestibulum pulvinar orci libero, in aliquet arcu auctor non. Morbi volutpat elit id lacus cursus, at imperdiet tellus eleifend. Morbi euismod vehicula urna, sed pretium felis ullamcorper vitae. Nunc at ligula a odio eleifend convallis eget sed orci. Praesent fermentum, sem in congue tempus, ex diam suscipit neque, in ullamcorper orci erat eu orci.</div>
  </div>
</div>

My motive is to prevent the child3 from overflowing the parent container and show ellipsis(...) when it overflows.

Any help is appreciated.

unpredictable
  • 320
  • 3
  • 13
  • You are mixing up **min** width and **max** width. `min-width:0` is saying it can be any length it likes. – FluffyKitten Aug 26 '20 at 16:08
  • @FluffyKitten I am unable to get your point. Can you please elaborate it ? – unpredictable Aug 26 '20 at 16:10
  • The **minimum** width is 0 i.e. the div must be *at least* 0px. That doesn't limit the width - it can grow to any length. If you want the div to be *no more than* a specific length, you set the **maximum** width. – FluffyKitten Aug 26 '20 at 16:14
  • @FluffyKitten the width of the `chlid3` is can occupy the available space, so if I set its `max-width` to some value it will not grow beyond that but if my screen size becomes greater than the max-width than the div will not grow beyond that point. – unpredictable Aug 26 '20 at 16:17
  • Yes, and that available space is the full width. At the moment (in the code you have shown at least) you have nothing to limit the width it can use. If you want to limit the width, you need to set a limit *somewhere* in your code. – FluffyKitten Aug 26 '20 at 16:21
  • Hold up. `.child2` and `.child3` are not flex children. Their parent is an unlabelled `div`. I'll see if I can provide an answer that also addresses this. – chicgeek Aug 26 '20 at 16:23

3 Answers3

4

There are a couple of issues with what you posted, but fear not we can sort you out.

What is flex, what is not

First let's look at your markup:

.parent is an element with display: flex. From your naming we might incorrectly assume that its children are:

  • .child1,
  • .child2, and
  • .child3.

…but this is not the case.

The children of .parent are actually:

  • .child1, and
  • a classless div.

The classless div has no styles set for it, so .child2 and .child3 are not positioned in a flexbox context. For this reason, your min-width: 0 on .child3 doesn't solve your problem, as that solution only applies for flex children.

Applying min-width in the correct context

To start, let's give that child div a class: .foo.

.foo itself has a block display, but currently it is allowing content (in .child3) to overflow. It is this element on which we want to prevent overflow:

.foo {
  min-width: 0;
}

That should be all you need. It seems you're already familiar with why we use min-width to help with this, but just in case you can read about it in CSS Tricks: Flexbox and Truncated Text.

Solution

Below is all of it put together.

.parent {
  display: flex;
  border: 2px solid red;
}

.foo {
  min-width: 0;
  outline: 1px solid rebeccapurple;
}

.child1 {
  background: cyan;
  height: 40px;
  width: 40px;
  flex-shrink: 0;
}

.child2 {
  background: pink;
  height: 20px;
  width: 20px;
}

.child3 {
  background: yellow;
  height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
<div class='parent'>
  <div class='child1'>1</div>
  <div class="foo">
    <div class='child2'>2</div>
    <div class='child3'>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus sagittis odio, ac pulvinar tortor sagittis et. In hac habitasse platea dictumst. Phasellus ut velit dolor. Vestibulum pulvinar orci libero, in aliquet arcu auctor non. Morbi volutpat elit id lacus cursus, at imperdiet tellus eleifend. Morbi euismod vehicula urna, sed pretium felis ullamcorper vitae. Nunc at ligula a odio eleifend convallis eget sed orci. Praesent fermentum, sem in congue tempus, ex diam suscipit neque, in ullamcorper orci erat eu orci.
    </div>
  </div>
</div>
chicgeek
  • 486
  • 3
  • 16
2

As I said in my comments, you don't have anything limiting the length of your child-3 div. Your min-width:0 is not going to have any effect because that is just saying the div can take up as much space at it wants.

child-3 (and child-2 by the way) doesn't have any parent so there is nothing to limit it and therefore it is using all of the available width.

You need to give the child a flex parent with overflow:hidden that will then set a limit on its width. Assuming you want the same parent type, you can do the following:

UPDATE: the code below, you can use the same parent class to wrap your child-2 and child-3, making it act the same way:

.parent {
  display: flex;
  border: 2px solid red;
  overflow: hidden;
}

.child1 {
  background: cyan;
  height: 40px;
  width: 40px;
  flex-shrink: 0;
}

.child2 {
  background: pink;
  height: 20px;
  width: 20px;
}

.child3 {
  background: yellow;
  height: 20px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<div class='parent'>
  <div class='child1'>1</div>
  <div class='parent'>
    <div class='child2'>2</div>
    <div class='child3'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus sagittis odio, ac pulvinar tortor sagittis et. In hac habitasse platea dictumst. Phasellus ut velit dolor. Vestibulum pulvinar orci libero, in aliquet arcu auctor non. Morbi volutpat
      elit id lacus cursus, at imperdiet tellus eleifend. Morbi euismod vehicula urna, sed pretium felis ullamcorper vitae. Nunc at ligula a odio eleifend convallis eget sed orci. Praesent fermentum, sem in congue tempus, ex diam suscipit neque, in ullamcorper
      orci erat eu orci.
    </div>
  </div>
</div>
FluffyKitten
  • 13,824
  • 10
  • 39
  • 52
2

If you want the exact same results:

.parent{
  display: flex;
  border: 2px solid red;
}

.child1{
  background: cyan;
  height: 40px;
  width: 40px;
  flex-shrink: 0;
}
.child-wrapper{
  display:flex;
  flex-direction: column;
  overflow: hidden;
}
.child2 {
  background: pink;
  height: 20px;
  width: 20px;
}

.child3 {
  background: yellow;
  height: 20px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<div class='parent'>
  <div class='child1'>1</div>
  <div class='child-wrapper'>
    <div class='child2'>2</div>
    <div class='child3'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus sagittis odio, ac pulvinar tortor sagittis et. In hac habitasse platea dictumst. Phasellus ut velit dolor. Vestibulum pulvinar orci libero, in aliquet arcu auctor non. Morbi volutpat elit id lacus cursus, at imperdiet tellus eleifend. Morbi euismod vehicula urna, sed pretium felis ullamcorper vitae. Nunc at ligula a odio eleifend convallis eget sed orci. Praesent fermentum, sem in congue tempus, ex diam suscipit neque, in ullamcorper orci erat eu orci.</div>
  </div>
</div>
Arbin Shrestha
  • 155
  • 1
  • 7
  • 1
    This looks the best answer. Can you please tell me why its working?? – unpredictable Aug 26 '20 at 16:33
  • 2
    I suggest you take a good look on how flex works: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ The thing is flex arranges its child elements in some order, in your code the child2 and child3 elements were not in any flex parent, and were displayed in normal block fashion which has no constraints so the text overflowed. what i did was give them a flex parent is all. – Arbin Shrestha Aug 26 '20 at 16:37