2

I have a following HTML code:

<div class="row">
    <div class="column1"></div>
    <div class="column2"></div>
    <div class="column3"></div>
</div>

Class .row is a flexbox set to be a row. Classes column1 and column2 have set fixed width property in CSS. However class column3 doesn't have that property. When I'm adding text to that container, it changes width of the rest two containers.

I tried properties white-space: no-wrap, overflow: hidden, overflow-wrap: break-word.

None of these properties prevent changing width of other two columns. How can I fix it so all three columns will have fixed width but column3 will adjust automatically when window size is changed?

Johannes
  • 64,305
  • 18
  • 73
  • 130
VIPPER
  • 326
  • 4
  • 24

1 Answers1

2

If you add flex-shrink: 0 to the column1 and column2 flex items, this will prevent their getting smaller. (flex-grow: 0 would do the same for getting larger, but that's already the default setting for this property, so you don't need to add it.)

Johannes
  • 64,305
  • 18
  • 73
  • 130
  • Thanks for advice! It helped! However there's still one more problem I wasn't aware about previously. Now when all columns to the left of column3 have fixed width and don't shrink, column3's width grows to available 100% spare size which is size of the entire window. I tried to use calc(100% - fixed_columns_width) with no effect. How to create a rule so 100% width for that column 3 means 100% width of parent, not body? – VIPPER Oct 02 '19 at 08:33
  • thanks this helped, also you can use `width: -webkit-fill-available;` on the element that is super long – Akin Hwan Mar 29 '23 at 22:27