时间戳

首页 > 解决方案 > 溢出隐藏在弹性孩子的孩子身上

html - 溢出隐藏在弹性孩子的孩子身上

问题描述

我有一个带有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

标签： htmlcssflexboxoverflow

解决方案

尝试这个

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

推荐阅读