How to prevent the content of flex element from changing?

I use CSS flexbox to create a scalable, flexible grid. When you apply a Google chart to one of the flexbox items, the item resizes slightly. This is enough to throw the grid out of alignment. I have compiled the following images to help illustrate the problem.

Flexbox before applying Google chart to element 6:

Flexbox Layout - Before Google Chart

Flexbox after applying Google chart to element 6:

Flexbox Layout - After Google Chart

The flexbox grid loads faster than the Google chart, so the grid initially loads correctly. However, when the chart loads, item 6 expands slightly, invoking image 2 above.

A medium sized flexible container container and 6 div element are set in css as follows:

#middlecolumn { width: 75%; height: 100%; display: flex; flex-flow: column; margin: 0.25%; } #item6_div { flex: 3; margin-top: 0.8vh; } 

Note that paragraphs 5 and 7 are set the same in css, flex values โ€‹โ€‹of 1 . That is, point 6 is 3 times the height of points 5 and 7. As such, when element 6 changes, a 3: 1 ratio is maintained.

Is there something that I am missing in css to prevent google chart resizing in flexbox container?

+5
source share
1 answer

When you point a flex: 3 item to flex: 3 (item 6) or flex: 1 (items 5 and 7), how does this property shorten:

 flex: ? = <flex-grow>, <flex-shrink>, <flex-basis> flex: 3 = flex-grow: 3, flex-shrink: 1, flex-basis: 0 flex: 1 = flex-grow: 1, flex-shrink: 1, flex-basis: 0 

In both cases, the flex-shrink coefficient is 1, which means that the flexibility element is allowed to be proportionally reduced.

To prevent flex elements from being compressed, which could cause misalignment, I would change the flex-shrink value to 0.

Instead of flex: 3 and flex: 1 try:

 flex: 3 0 0; flex: 1 0 0; 

More details in the flexbox specification: 7.1.1. Basic flex values


But you may have another problem. You wrote:

Note that points 5 and 7 are set the same in css, with flex values โ€‹โ€‹of 1 . That is, point 6 is 3 times the height of points 5 and 7. As such, when element 6 changes, a 3: 1 ratio is maintained.

This is not working property flex-grow .

When you apply flex-grow: 3 to a flex element, you tell it to consume three times as much free space as flex elements with flex-grow: 1 . This does not necessarily mean that paragraph 6 will be three times the size of paragraphs 5 and 7.

Learn more about how flex-grow works here: flex-grow does not pick up the flex items as expected

As an alternative calibration method, you can use the flex-basis property. Try flex: 0 0 60% in point 6 and flex: 0 0 20% in points 5 and 7.

+5
source

Source: https://habr.com/ru/post/1245942/


All Articles