How to get the height of a row in a flexbox If I had a flexbox container and within that container, there were 3 different rows would it be possible with maybe javascript to retrieve the height of each row, so for example if I wanted to get the height of the second row in the flexbox would that be a possibility?

CodePudding user response：

You would be able to achieve this by creating an array with all the elements that have the same class, and then with a forEach you would be able to get the height of all these elements. For example:

let arrayName = document.querySelectorAll(".your-row"); 
//gets every single element that has the your-row class.

arrayName.forEach(element => console.log(element.clientHeight));
/* loops through the element and for each element it prints the height to the console 
including padding but NOT the horizontal scrollbar height, border, or margin. */

If you want to get the height of the 2nd element for example, you would just need to use the same array and specify you want to get the 2nd one. For example:

let arrayName = document.querySelectorAll(".your-row"); 
//Getting all elements again.

console.log(arrayName[1].clientHeight);
// Log the 2nd elements height into the console.