How to set the div width properly insedi a flexbox?

March 30, 2023

I have this code

<div style="display:flex; justify-content:space-between; width:100%">
    <div id="this">
       <h3>Title</h3>
    </div>
    <div>
      <input type="radio">
      <input type="radio">
      <input type="radio">
   </div>
   <div>
      <p>Text</p>
   </div>
</div>

I want to set the #this div width so that it is exactly the same size as the space-between attribute creates for it without push away the other elements. (The first puple section).

Basically what i want is to handle if the text is to long, by hidding it’s overflow, but first I need to set it’s width, and I want to show as much as its possible without pushing away other elements

If there’s another way to handle long text that’s fine too, just make it work like how I want.

I try to set the div width, max-width but can’t figured out, each way the other elements are pushed away

>Solution :

Use Flex:1; to set width to maximum available space between elements

You can see the detailed document about flex here

#this,#another{
  border:1px solid;
  flex:1;
}

<div style="display:flex; justify-content:space-between; width:100%">
    <div id="this">
       <h3>Title</h3>
    </div>
    <div>
      <input type="radio">
      <input type="radio">
      <input type="radio">
   </div>
   <div id ="another">
      <p>Text</p>
   </div>
</div>