CSS - 弹性盒子不包含其子元素

Question

我在一个列表项中有一个容器，它具有灵活的显示。当此容器内的内容也具有灵活的显示时，容器会调整为内容大小，而不是溢出内容。列表元素如下所示。

如果标签太长，列表项将相应地调整大小，而不是让标签溢出。

#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>

第二个列表项已根据此处标签的大小进行了调整。 我希望文字显示省略号。当我更改外部div的显示时会发生这种情况。但是对齐方式会出现问题。

这是flex布局的工作原理吗？还是我做错了什么？

- raiyan

---

默认情况下，flex项目的大小不能小于其内容的大小。flex项目的初始设置为min-width: auto。您需要使用#usertag { min-width: 0}来覆盖此设置。https://jsfiddle.net/pb1qkaes/ - Michael Benjamin

Answer 1

你需要在外层元素中为子元素指定宽度。
给复选框 "inner" div 指定宽度 = 10%。
并且给你的 "usertag" div 指定宽度 = 90%。

#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>

- Aftab Khan