html - 图片标题和列表的 CSS Overflow 问题

Question

这可能使用 css 吗...我也尝试过使用绝对和相对...但它只适用于 left:0 和 right:0...但是高度 bottom 和 top 几乎是 0.. . 它不需要任何值(value)或可扩展性...

在检查元素中进行一些测试和实验时...(我忘记了我在做什么...无法重新创建)我能够做一些椭圆但是使用 100% 宽度这仍然不是我正在寻找的结果，因为它包括左边部分或代码的图片部分等同于宽度......它导致....../省略号，但它仍然溢出...需要帮助。

提前致谢

<!--
    I Want Responsive :(
    Overall Box is 330px
    So The Header and Items must be around 280
    Picture is 50px only
    Items must be scalable in height... it can be more like e.g 20items

    PROBLEM
----------------------------
| Pic | Header             |
| tu  | ------------------ |
| re  | Item 1             |
|     | Item 2             |
|     | Item 3333333333333333333333333 | <- Overflow
|     | Item 4             |
|     | Item 5             |
----------------------------

    EXPECTED RESULT
----------------------------
| Pic | Header             |
| tu  | ------------------ |
| re  | Item 1             |
|     | Item 2             |
|     | Item 3333333333... | <- TextOverflow
|     | Item 4             |
|     | Item 5             |
----------------------------
-->

https://jsfiddle.net/uv98zgbk/

这可能吗？如果可能的话，我宁愿避免在 css 中使用 calc，比如 100% - 50px...ocd 问题

Answer 1

这样的东西行得通吗？改为在 anchor 标记上设置溢出？

.container {
  max-width: 300px;
  height: 300px;
  display: flex;
overflow:hidden;
}

div {
  border: 1px solid black;
}

.list {
  flex-grow: 2;
  max-width:100%;
}

.list-container {
  max-width: 50%;
  display: flex;
  flex-direction: column;
}

a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="container">
  <div class="picture">
    Picture
  </div>
  <div class="list">
    Header
    <div class='list-container'>
      <a href="#">Item 1</a>
      <a href="#">Item 2</a>
      <a href="#">Item 333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333</a>
      <a href="#">Item 4</a>
      <a href="#">Item 5</a>
    </div>
  </div>
</div>