隐藏在弹性孩子的孩子身上的溢出[重复]

Question

我有一个带有flex: 1 的弹性元素。它是一个列，并且应该占用与兄弟相同的空间

此列有两个子列。一个允许溢出，另一个不允许溢出。 如何仅在一个孩子上定义overflow: hidden？

.row {
  display: flex;
  justify-content: space-between;
}

.col {
  background-color: blue;
  border: 1px solid white;
  padding: 10px;
  flex: 1;
  position: relative;
  
  &:hover {
    .child-that-can-overflow {
      display: block;
    }
  }
}

.child-that-can-overflow {
  position: absolute;
  right: -20px;
  left: 0;
  background-color: yellow;
  z-index: 100;
  display: none;
}

.child-that-cant-overflow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

<div class="row">
  <div class="col">
    <div class="child-that-cant-overflow">
      long long text that causes overflow. It should be hidden, with text ellipsis
    </div>
    
    <div class="child-that-can-overflow">
      BUTTON
    </div>
  </div>
  <div class="col"></div>
  <div class="col"></div>

</div>

如果我将父级设置为overflow: hidden，我的按钮将被剪切。如果我不这样做，另一个孩子的文本会导致列溢出。

有什么创意解决方案吗？
谢谢！

JSFiddle

Answer 1

试试这个

.col {
  background-color: blue;
  border: 1px solid white;
  padding: 10px;
  flex: 1;
  position: relative;
  height: 20px;//as your requirement
    overflow: auto;// to auto scroll

  &:hover {
    .child-that-can-overflow {
      display: block;
    }
  }
}