Overflow hidden on a child of a flex child

Question

I have a flex element with flex: 1. It's a column, and should take up equal space as it's siblings

This column has two children. One is allowed to overflow, the other is not. How can I defined overflow: hidden only on one child?

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

If I set the parent to overflow: hidden, my button will be cut. If I don't, the text of the other child will cause the column to overflow.

Any creative solutions?
Thanks!

JSFiddle

button and text is your child element right and you need para graph to overflow button button to not? Am i right? — Awais, Oct 24 '19 at 07:37
I didn't quite understand the question. I need BUTTON to be able to overflow it's parent (col) and text's overflow to be hidden (I.E - not expand the parent col) — Uri Klar, Oct 24 '19 at 08:23
Add `min-width: 0` to `.col`. https://jsfiddle.net/netfp7Lr/ — Michael Benjamin, Oct 24 '19 at 13:25

score 0 · Answer 1 · answered Oct 24 '19 at 09:46

Try this

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

Overflow hidden on a child of a flex child

1 Answers1