Question 190789 in Html Question posted in
Some basic documentation can be found here.

Html – How to ignore a child's width in a flex item

Please check out the following code:

<div style="display: flex; background: black; max-width: 600px;">
  <div style="background: yellow">AAA AAA AAA AAA AAA AAA</div>
  <div style="min-width: 0;">
    <div style="background: cyan">BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB</div>
    <div style="background: magenta; overflow-x:auto; width:100%; min-width: 0;">
      <div style="width:3000px"> 
        CCC CCC
      </div>
    </div>
    <div style="background: green">DDD DD DDDDDD D</div>
  </div>
</div>

I have a parent flex divided in 2 columns.

In the right column, one of the elements (the magenta one) is very large, but that’s OK with me, I’d like to keep the scroll behavior.

However, because the magenta element is very wide, the yellow element shrinks, which bothers me.

I would like the proportions between the left and the right columns to be exactly the same as in this snippet:

<div style="display: flex; background: black; max-width: 600px;">
  <div style="background: yellow">AAA AAA AAA AAA AAA</div>
  <div style="min-width: 0;">
    <div style="background: cyan">BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB</div>
    <div style="background: green">DDD DD DDDDDD D</div>
  </div>
</div>

How can I proceed to "ignore" the magenta element’s width, so the size of the yellow column doesn’t change?

NB: I don’t want to use fixed widths! I want my columns to share the available space depending on what they contain (only the magenta element should be ignored)

Thanks

Tags:

2

Answers


  1. 0

    One solution, is that you can use min-width on your columns to achieve what you want with the downside that you need to specify a fix min-width.

    <div style="display: flex; background: black; max-width: 600px;">
  <div style="background: yellow; min-width: 300px;">AAA AAA AAA AAA AAA</div>
  <div style="min-width: 300px;">
    <div style="background: cyan">BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB</div>
    <div style="background: magenta; overflow-x:auto; width:100%; min-width: 0;">
      <div style="width:3000px"> 
   CCCCCCCC CCCCCCCCCCCCCCCCCCCCCCCC
      </div>
    </div>
    <div style="background: green">DDD DD DDDDDD D</div>
  </div>
</div>

    Since you don’t want to use fixed widths on the elements, this approach is suited for you. You can use the flex property on your yellow background element as someone mentioned in the comments, but deleted it.

    <div style="display: flex; background: black; max-width: 600px;">
  <div style="background: yellow; flex: 0 0 auto;">AAA AAA AAA AAA AAA</div>
  <div style="min-width: 300px;">
    <div style="background: cyan">BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB</div>
    <div style="background: magenta; overflow-x:auto; width:100%; min-width: 0;">
      <div style="width:3000px"> 
   CCCCCCCC CCCCCCCCCCCCCCCCCCCCCCCC
      </div>
    </div>
    <div style="background: green">DDD DD DDDDDD D</div>
  </div>
</div>

    Third solution: You can use flex-basis: 100% on your yellow element which sets the initial main size of a flex item and it will do the trick. Have a look here.

    Login or Signup to reply.
  2. 0

    Solution

    Use flex-basis. The flex-basis should be set on the longer element – if I want to explain it very simply, it’s similar to max-width but specific to flex.

    The flex-basis property determines the initial size of a flex item before the remaining space is distributed by the system during layout.

    For example, if we set the flex-basis property of a flex item to 200px, it means that the item’s initial size will be 200 pixels (regardless of its content or the size of other elements). Then, along with the other flexible items and the available space, the Flexbox model automatically distributes the appropriate space among the content items in the proper proportions.

    <!-- Solution -->

<h3>With Too Large Element - Use "flex-basis"</h3>
<div style="display: flex; background: black; max-width: 600px;">
  <!-- First Column -->
  <div style="background: yellow;">
    AAA AAA AAA AAA AAA AAA
  </div>
  <!-- Second Column -->
  <div style="min-width: 0; flex-basis: 100%;"> <!-- Use "flex-basis: 100%" on too width element -->
    <!-- Cyan -->
    <div style="background: cyan;">
      BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB
    </div>
    <!-- Magenta (too large) -->
    <div style="background: magenta; overflow-x:auto; width: 100%; min-width: 0;">
      <div style="width: 3000px;"> 
        CCC CCC
      </div>
    </div>
    <!-- Green -->
    <div style="background: green">
      DDD DD DDDDDD D
    </div>
  </div>
</div>


<!-- To Compare -->

<h3>Original (Without Too Large Element)</h3>
<div style="display: flex; background: black; max-width: 600px;">
  <!-- First Column -->
  <div style="background: yellow;">
    AAA AAA AAA AAA AAA AAA
  </div>
  <!-- Second Column -->
  <div style="min-width: 0; flex-basis: 100%;">
    <!-- Cyan -->
    <div style="background: cyan;">
      BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB
    </div>
    <!-- Green -->
    <div style="background: green">
      DDD DD DDDDDD D
    </div>
  </div>
</div>


<!-- To Compare -->

<h3>Original (With Too Large Element)</h3>
<div style="display: flex; background: black; max-width: 600px;">
  <!-- First Column -->
  <div style="background: yellow;">
    AAA AAA AAA AAA AAA AAA
  </div>
  <!-- Second Column -->
  <div style="min-width: 0;">
    <!-- Cyan -->
    <div style="background: cyan;">
      BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB BBB
    </div>
    <!-- Magenta (too large) -->
    <div style="background: magenta; overflow-x:auto; width: 100%; min-width: 0;">
      <div style="width: 3000px;"> 
        CCC CCC
      </div>
    </div>
    <!-- Green -->
    <div style="background: green">
      DDD DD DDDDDD D
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search