1

I have 2 items, 1 is a fixed width of 100px the other fills the space. The other item has a child with long text on one line that gets ellipses. Unfortunately it overflows its parent. How can i make it not exceed the parent??

issue: https://jsfiddle.net/jv54f6g1/2/

i found one solution but i dont feel its ideal: https://jsfiddle.net/jv54f6g1/3/

code:

<div class="a">
  <div class="b">
    <p>im a icon</p>
  </div>
  <div class="c">
    <p>im a teapot that is short and stout, here is my handle Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, mollitia, obcaecati. Amet, modi. Consequuntur sit asperiores veniam, cupiditate dolores iusto illo alias? Cupiditate, optio delectus voluptatum, ducimus nam inventore doloribus.</p>
  </div>
</div>

css

* {
  box-sizing: border-box;
}

.a {
  width: 100%;
  display: flex;
  max-width: 500px;
  border: 1px solid red;
}

.b {
  min-width: 100px;
  display: block;
}

.c {
  flex: 1;
  background: yellow;
  max-width: 100%;

  p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
Johannes
  • 64,305
  • 18
  • 73
  • 130
Sean
  • 332
  • 1
  • 6
  • 16

1 Answers1

0

Add overflow: hidden; to that second element (.c)

https://jsfiddle.net/e2am9hj0/

Johannes
  • 64,305
  • 18
  • 73
  • 130
  • this solves it but hides things like box-shadows and etc, proper solution for me is what @temani afif said, using 'min-width:0' – Sean Nov 09 '18 at 21:56