CSS 图片 header 和列表溢出问题

Question

这是否可能使用 css...我也尝试过使用绝对和相对...但它只适用于 left:0 和 right: 0...但是底部高度top 几乎是 0...它没有任何价值或可扩展性...

在检查元素中进行一些测试和试验时...（我忘记了我在做什么...无法重新创建）我能够做一些椭圆但是使用 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

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

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

CSS 图片 header 和列表溢出问题

CSS Overflow problems with picture header and list

html

css

overflow

responsive