Let’s dive into the HTML and CSS code to see what is happening here. The table is made by div, and for each column, there is the style flex 1 1, what does this mean?
The flex property is used in flexbox layouts to control how flex items (in this case, the elements with the class "column") grow and shrink within a flex container (in this case, the "table-container" element). The flex property is shorthand for three separate properties: flex-grow, flex-shrink, and flex-basis. Let me explain each part:
flex-grow: This is the first value in theflexproperty (1in my code). It determines how much an element should grow relative to the other elements within the same flex container when there is extra space available. So they will all grow at the same rate and share the available space equally.flex-shrink: This is the second value in theflexproperty (1in my code). It determines how much an element should shrink relative to the other elements within the same flex container when there is not enough space to accommodate all the elements. Aflex-shrinkvalue of1means that all elements will shrink at the same rate.flex-basis: This is the third value in theflexproperty. In my code, there is no explicit value provided forflex-basis, so it will use its default value, which is "auto." Whenflex-basisis set to "auto," the browser calculates the initial size of the flex item based on its content.
So, in summary, flex: 1 1; means that all elements with the class "column" will have equal flexibility to grow and shrink within the flex container, and their initial sizes will be based on their content.
It also set a fixed width for the flex container using .table-container { width: 100px; }. When the available width is limited, and the content (in this case, "total steps") cannot fit within the available space, the browser will wrap it to the next line to prevent horizontal overflow.
