0

I have 1 parent container div with 2 child divs.

What I need is that:

  1. Parent has max width (easy)
  2. If width of 1st child increases, width of parent also increases (limited by max-width)
  3. If width of 2nd child increases, nothing happens

So basically, parent width is only controlled by 1st child and if 1st child is 100px width and 2nd child is 200px, than parent is 100px.

JSBin example

Draft css in jsbin: 

 BODY {
  padding: 20px;
  background: white;
  }
.container {
  padding: 10px;
  background: gold;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  max-width: 350px;
  min-width: 0;
  }
.item1 {
  margin: 10px;
  padding: 5px;
  background: tomato;
  border-radius: 5px;
  border: 1px solid #FFF;
  flex-flow: row nowrap;
  box-sizing: border-box;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  flex: 1;
  }

.item2 {
  margin: 10px;
  padding: 5px;
  background: tomato;
  border-radius: 5px;
  border: 1px solid #FFF;
  flex-flow: row nowrap;
  box-sizing: border-box;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  }
Artur Takoev
  • 127
  • 2
  • 11
  • *So basically, parent width is only controlled by 1st child and if 1st child is 100px width and 2nd child is 200px, than parent is 100px.* --> and the second child become 100px with line break or overflow? – Temani Afif Jan 31 '20 at 10:42
  • @TemaniAfif, yes, second will be 100px as well with overflow: hidden – Artur Takoev Jan 31 '20 at 11:27
  • check the duplicate then. The image will be your first text that will define the width – Temani Afif Jan 31 '20 at 11:28
  • Checked it: this solution doesn't seem to work with white-space: nowrap and even without it, in my case it works pretty strange. I updated jsbin example with max and min content rules (https://jsbin.com/zidosugeni/edit?html,css,output) @TemaniAfif – Artur Takoev Jan 31 '20 at 11:52
  • are you sure you checked? I don't see anything in your code the same as the duplicate and my answer – Temani Afif Jan 31 '20 at 12:03
  • didn't notice you changed the duplicate link :) the one with image worked, thanks! – Artur Takoev Jan 31 '20 at 12:03

0 Answers0