i am beginner in web development,i want to make my home-page element (div) to flex column in which first element is a flex row container which again contains a flex container div (icons)when i did this, i found that width of container containing img elements is not decreasing to fit all imgs why it is happening ?
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style> body { margin: 0px; } #home-page { display: flex; flex-direction: column; } * { border: 1px solid; margin: 5px; } nav { display: flex; height: 100px; } #icons { display: flex; } img { height: 100%; margin: 0px; }</style></head><body><div id="home-page"><nav><div id="icons"><div><img src="/images/icons/menu-icon.png" alt=""></div><div><img src="/images/icons/search-icon.png" alt=""></div></div></nav></div></body></html>here is the image of output
also explain me that how the width and height of any element is calculated when there are all relative sizes (percentage,etc.)
when i set the width or height to a pixel value then i worked, but i want to know why it is not working in relative size (i want to make most of sizes relative so that my website become responsive)