css - Flex box does not contain its child elements

Question

I have a container in a list item, which has a flex display. When the content inside this container is also of display flex, the container resizes to the size of the content, instead of the content overflowing. The list element looks like this.

If the label is too long the list item resizes accordingly, instead of letting the label overflow.

#div {
  width: 300px;
  border: 1px solid red;
}

#userimage {
  width: 20px;
  height: 20px;
  border: 1px solid red;
}

#usertag {
  display: flex;
}

#inner {}

#outer {
  display: flex;
}

ul {
  list-style-type: none;
}

p {
  margin: 0;
  text-overflow: ellipsis;
  overflow: hidden;
}

<div id="div">
  <ul>
    <li>
      <div id="outer">
        <div id="inner">
          <input type="checkbox" id="checkbox" />
        </div>
        <div id="usertag">
          <div id="userimage">
          </div>
          <p>
            <label>1</label>
          </p>
        </div>
      </div>
    </li>
    <li>
      <div id="outer">
        <div id="inner">
          <input type="checkbox" id="checkbox" />
        </div>
        <div id="usertag">
          <div id="userimage">

          </div>
          <p>
            <label>12312312312451232e524t230t923t8rq0w9t8q0w9er</label>
          </p>
        </div>
      </div>
    </li>
  </ul>
</div>

The second list item has resized according to the size of the label here. I would like the text to show an ellipsis. It happens when i change the display of the outer div. But the alignment gets screwed.

Is this how flex display works? Or am I doing something wrong?

By default, a flex item cannot be smaller than the size of its content. The initial setting on flex items is `min-width: auto`. You need to override this with `#usertag { min-width: 0} `. https://jsfiddle.net/pb1qkaes/ — Michael Benjamin, Jul 20 '16 at 13:40

score 0 · Accepted Answer · answered Jul 20 '16 at 13:14

U need to give a widths on your children inside outer.
Give width = 10% for checkbox "inner" div.
And width = 90% for your "usertag" div.

#div {
  width: 300px;
  border: 1px solid red;
}

#userimage {
  width: 20px;
  height: 20px;
  border: 1px solid red;
}

#usertag {
  display: flex;
  width: 100%;
}

#inner {
width: 10%;
}

#outer {
  display: flex;
  width: 90%;
}

ul {
  list-style-type: none;
}

p {
  margin: 0;
  text-overflow: ellipsis;
  overflow: hidden;
}

<div id="div">
  <ul>
    <li>
      <div id="outer">
        <div id="inner">
          <input type="checkbox" id="checkbox" />
        </div>
        <div id="usertag">
          <div id="userimage">
          </div>
          <p>
            <label>1</label>
          </p>
        </div>
      </div>
    </li>
    <li>
      <div id="outer">
        <div id="inner">
          <input type="checkbox" id="checkbox" />
        </div>
        <div id="usertag">
          <div id="userimage">

          </div>
          <p>
            <label>12312312312451232e524t230t923t8rq0w9t8q0w9er</label>
          </p>
        </div>
      </div>
    </li>
  </ul>
</div>

css - Flex box does not contain its child elements

1 Answers1