how to dynamically set width of a div based on one of the subdivs

Question

I have this structure. A div that has 2 other divs inside of it

<div id='main'>
  <div id='1>
      Text I want to have overflowo: hidden 
  </div>
  <div id='2'>
      Text that I want do decide the width of main div 
  </div>
</div>

If the text in div 2 overflows I want the main div to expand, but if the text in div 1 overflows the max-width specified I want the main div to remain the same width

Not sure if this is possible using just css

I may have oversimplified the example at the top. Not dealing with pure text.

Want the bottom part with the buttons drive the width but if there is something in the list that is too long it will get clipped.

score 1 · Accepted Answer · answered Jan 24 '23 at 14:03

CSS grid with grid-template-columns: fit-content() is handy for this:

#main {
  border: 1px solid red;
  display:inline-grid;
  grid-template-columns: fit-content(0ch);
  width: min-content;
}

#one {
  border: 1px solid green;
}

#two {
  white-space:nowrap;
}

<div id='main'>
  <div id='one'>
      Text I want to have overflowo: hidden  sdfs  sdf sdf js fsj flskdj sklfjsd flksjf skldjsdlfk js flkjs flskdj sdlkf
  </div>
  <div id='two'>
      Text that I want do decide the width
  </div>
</div>

Added 2nd example from your edited question To make make the first width just overflow, use the following css:

#main {
  border: 1px solid red;
  display:inline-grid;
  grid-template-columns: fit-content(0ch);
  width: min-content;
}

#one {
  border: 1px solid green;
  overflow: hidden;
  white-space:nowrap;
}

#two {
  white-space:nowrap;
}

<div id='main'>
  <div id='one'>
      Text I want to have overflowo: hidden  sdfs  sdf sdf js fsj flskdj sklfjsd flksjf skldjsdlfk js flkjs flskdj sdlkf
  </div>
  <div id='two'>
      Text that I want do decide the width
  </div>
</div>

score 0 · Answer 2 · answered Jan 24 '23 at 13:47

Make #main display inline-block, so it would always wrap it's child elements.

Than add white-space: nowrap to #d2 (CSS does not work with integer ID names)

#main {
  border: 1px solid red;
  display: inline-block;
}

#d1 {
  border: 1px solid green;
  max-width: 100vw;
}

#d2 {
  border: 1px solid blue;
  
  white-space: nowrap;
}

<div id='main'>
  <div id='d1'>
      Text I want to have overflowo: hidden 
      Text I want to have overflowo: hidden 
      Text I want to have overflowo: hidden 
      Text I want to have overflowo: hidden 
      Text I want to have overflowo: hidden 
      Text I want to have overflowo: hidden 
      Text I want to have overflowo: hidden 
      Text I want to have overflowo: hidden 
      Text I want to have overflowo: hidden 
  </div>
  <div id='d2'>
      Text that I want do decide the width of main div 
      Text that I want do decide the width of main div 
      Text that I want do decide the width of main div 
      Text that I want do decide the width of main div 
      Text that I want do decide the width of main div 
      Text that I want do decide the width of main div 
      Text that I want do decide the width of main div 
      Text that I want do decide the width of main div 
      Text that I want do decide the width of main div 
      Text that I want do decide the width of main div 
      Text that I want do decide the width of main div 
  </div>
</div>

how to dynamically set width of a div based on one of the subdivs

2 Answers2