Error, fixed container not succesfull using Css and Bootstrap - html

Question

I have a problem with the fixed property of css. When I apply it to my container with id="avatar", it "disappears"(As shown in the picture)
the div with the classes col-md-5 col-sm-12 order-1 order-md-0 contains all items on the left side.
The goal is that all the items on the left side can scroll and the avatar on the right side remains "fixed". But, I have not succeeded, what am I failing?
#main {
position: sticky;
top: 2px;
bottom: 1px;
display: flex;
justify-content: center;
align-items: center;
}
<div class="row">
<div class="col-md-5 col-sm-12 order-1 order-md-0">
<div class="row"></div>
<div class="row justify-content-center"></div>
<div id="imagesDiv"></div>
</div>
<div id="avatar" class="col-md-7 col-sm-12 order-0 order-md-1">
<main id="main" class="mx-auto">
<svg viewBox="0 0 264 280" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<circle id="react-path-1" cx="120" cy="120" r="120"></circle>
<path d="M12,160 C12,226.27417 65.72583,280 132,280 C198.27417,280 252,226.27417 252,160 L264,160 L264,-1.42108547e-14 L-3.19744231e-14,-1.42108547e-14 L-3.19744231e-14,160 L12,160 Z" id="react-path-2"></path>
<path d="M124,144.610951 L124,163 L128,163 L128,163 C167.764502,163 200,195.235498 200,235 L200,244 L0,244 L0,235 C-4.86974701e-15,195.235498 32.235498,163 72,163 L72,163 L76,163 L76,144.610951 C58.7626345,136.422372 46.3722246,119.687011 44.3051388,99.8812385 C38.4803105,99.0577866 34,94.0521096 34,88 L34,74 C34,68.0540074 38.3245733,63.1180731 44,62.1659169 L44,56 L44,56 C44,25.072054 69.072054,5.68137151e-15 100,0 L100,0 L100,0 C130.927946,-5.68137151e-15 156,25.072054 156,56 L156,62.1659169 C161.675427,63.1180731 166,68.0540074 166,74 L166,88 C166,94.0521096 161.51969,99.0577866 155.694861,99.8812385 C153.627775,119.687011 141.237365,136.422372 124,144.610951 Z" id="react-path-3"></path>
</defs>
<g id="Avataaar" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-825.000000, -1100.000000)" id="Avataaar/Circle">
<g transform="translate(825.000000, 1100.000000)">
<g id="background"></g>
<g id="Mask"></g>
<g id="Avataaar" stroke-width="1" fill-rule="evenodd" mask="url(#react-mask-5)">
<g id="Body" transform="translate(32.000000, 36.000000)">
<mask xmlns="http://www.w3.org/2000/svg" id="react-mask-6" fill="white"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#react-path-3"></use></mask>
<use xmlns="http://www.w3.org/2000/svg" fill="#D0C6AC" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#react-path-3"></use>
<g class="color-picker-Body" mask="url(#react-mask-6)" fill="#FD9841">
<g transform="translate(0.000000, 0.000000)" id="Color">
<rect x="0" y="0" width="264" height="280"></rect>
</g>
</g>
<path xmlns="http://www.w3.org/2000/svg" d="M156,79 L156,102 C156,132.927946 130.927946,158 100,158 C69.072054,158 44,132.927946 44,102 L44,79 L44,94 C44,124.927946 69.072054,150 100,150 C130.927946,150 156,124.927946 156,94 L156,79 Z" id="Neck-Shadow" fill-opacity="0.100000001" fill="#000000" mask="url(#react-mask-6)"></path>
</g>
<g id="Clothing" transform="translate(0.000000, 170.000000)"><path fill-rule="evenodd" clip-rule="evenodd" d="M108 14.6945C92.4839 18.3799 80.8951 25.5279 77.2277 34.1414C50.7207 44.7654 32 70.6962 32 100.999V110H232V100.999C232 70.6962 213.279 44.7654 186.772 34.1414C183.105 25.5279 171.516 18.3799 156 14.6945V32C156 45.2548 145.255 56 132 56C118.745 56 108 45.2548 108 32V14.6945Z" fill="#B7C1DB"></path>
<mask id="mask0_0_366" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="32" y="14" width="200" height="96">
<path fill-rule="evenodd" clip-rule="evenodd" d="M108 14.6945C92.4839 18.3799 80.8951 25.5279 77.2277 34.1414C50.7207 44.7654 32 70.6962 32 100.999V110H232V100.999C232 70.6962 213.279 44.7654 186.772 34.1414C183.105 25.5279 171.516 18.3799 156 14.6945V32C156 45.2548 145.255 56 132 56C118.745 56 108 45.2548 108 32V14.6945Z" fill="white"></path>
</mask>
<g mask="url(#mask0_0_366)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M102 63.3365C99.5284 62.4949 97.1884 61.5523 95 60.5196V110H102V63.3365ZM162 63.3365C164.472 62.4949 166.812 61.5523 169 60.5196V98.5C169 100.433 167.433 102 165.5 102C163.567 102 162 100.433 162 98.5V63.3365Z" fill="#F4F4F4"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M132 68C162.928 68 188 54.5686 188 38C188 28.137 179.115 19.3856 165.4 13.9175C185.194 18.941 198.5 28.2929 198.5 39C198.5 55.0163 168.727 68 132 68ZM98.6004 13.9175C84.8847 19.3856 76 28.137 76 38C76 54.5686 101.072 68 132 68C95.2731 68 65.5 55.0163 65.5 39C65.5 28.2929 78.806 18.941 98.6004 13.9175Z" fill="black" fill-opacity="0.16"></path>
</g></g>
<g id="Face" transform="translate(76.000000, 82.000000)" fill="#000000">
<g id="eyes" transform="translate(0.000000, 8.000000)" fill-opacity="0.599999964"><circle cx="30" cy="22" r="14" fill="white"></circle>
<circle cx="82" cy="22" r="14" fill="white"></circle>
<circle class="eyesColor" cx="30" cy="14" r="6" fill="black" fill-opacity="0.7" style="fill: rgb(0, 0, 0);"></circle>
<circle class="eyesColor" cx="82" cy="14" r="6" fill="black" fill-opacity="0.7" style="fill: rgb(0, 0, 0);"></circle>
</g>
<g id="eyeBrow" fill-opacity="0.599999964"><g xmlns="http://www.w3.org/2000/svg" fill-opacity="0.599999964">
<g id="I-Browse" transform="translate(0.000000, 0.000000)">
<path class="eyeBrowColor" fill-rule="evenodd" clip-rule="evenodd" d="M26.5473 6.1484C20.7403 6.41665 11.3522 10.6363 11.5941 16.4922C11.6021 16.6839 11.8836 16.768 12.0211 16.6206C14.776 13.6613 34.3365 10.6709 41.2261 12.2556C41.8566 12.4008 42.3356 11.7788 41.9363 11.3294C38.5142 7.48119 31.7498 5.90302 26.5473 6.1484" fill="black" fill-opacity="0.6" style="fill: rgb(207, 7, 7);"></path>
<path class="eyeBrowColor" fill-rule="evenodd" clip-rule="evenodd" d="M86.4526 6.1484C92.2596 6.41665 101.648 10.6363 101.406 16.4922C101.398 16.6839 101.116 16.768 100.979 16.6206C98.2238 13.6613 78.6634 10.6709 71.7738 12.2556C71.1433 12.4008 70.6642 11.7788 71.0636 11.3294C74.4857 7.48119 81.2501 5.90302 86.4526 6.1484" fill="black" fill-opacity="0.6" style="fill: rgb(207, 7, 7);"></path>
</g>
</g>
</g>
<g id="mouth"><g transform="translate(0.000000, 50.000000)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M35.1179 29.8719C36.1757 20.3802 44.226 13 54 13C63.8042 13 71.874 20.4259 72.8918 29.9599C72.9737 30.7273 72.1168 32 71.0428 32C56.1488 32 44.7379 32 37.0868 32C36.0066 32 35.012 30.8216 35.1179 29.8719Z" fill="black" fill-opacity="0.7"></path>
<mask id="mask0_0_636" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="35" y="13" width="38" height="19">
<path fill-rule="evenodd" clip-rule="evenodd" d="M35.1179 29.8719C36.1757 20.3802 44.226 13 54 13C63.8042 13 71.874 20.4259 72.8918 29.9599C72.9737 30.7273 72.1168 32 71.0428 32C56.1488 32 44.7379 32 37.0868 32C36.0066 32 35.012 30.8216 35.1179 29.8719Z" fill="white"></path>
</mask>
</g>
</g>
<g id="nose"><g xmlns="http://www.w3.org/2000/svg" id="Nose/Default" transform="translate(28.000000, 40.000000)" fill-opacity="0.16">
<path d="M16,8 C16,12.418278 21.372583,16 28,16 L28,16 C34.627417,16 40,12.418278 40,8" id="Nose"></path>
</g></g>
<g id="beard"></g>
</g>
<g id="TopA" stroke-width="1" fill-rule="evenodd"><defs xmlns="http://www.w3.org/2000/svg">
<rect id="react-path-197" x="0" y="0" width="264" height="280"></rect>
<path d="M180.14998,39.9204083 C177.390206,37.1003988 174.185913,34.7068297 171.069252,32.3065503 C170.381566,31.777442 169.682843,31.2610833 169.010544,30.7118441 C168.857687,30.5870323 167.291999,29.4657388 167.104691,29.0530544 C166.653816,28.0602634 166.915042,28.8332916 166.977255,27.6485857 C167.055857,26.150508 170.11064,21.9193194 167.831176,20.9490079 C166.828413,20.522232 165.039628,21.6579526 164.077671,22.0330592 C162.196235,22.7671676 160.291721,23.3932399 158.346734,23.9330847 C159.278588,22.0763407 161.055333,18.3594977 157.71591,19.3543018 C155.114345,20.1293431 152.690052,22.1219709 150.075777,23.0594018 C150.940735,21.6415124 154.399901,17.2479341 151.274209,17.0023366 C150.301549,16.925839 147.471201,18.7503735 146.423952,19.1395717 C143.287223,20.3054888 140.083264,21.0590571 136.789999,21.6525844 C125.59203,23.6707114 112.497238,23.0953019 102.1368,28.1934632 C94.1494796,32.1236942 86.262502,38.2220278 81.648386,45.987539 C77.2011742,53.472559 75.537818,61.6641751 74.6069673,70.2412987 C73.9239644,76.535909 73.8684412,83.0425652 74.1878671,89.3599905 C74.2922241,91.4297869 74.5250203,100.970847 77.5319724,98.0813859 C79.0300967,96.641688 79.019059,90.8282073 79.3963495,88.8604076 C80.1472513,84.9452748 80.870057,81.0126951 82.122006,77.2227096 C84.3282191,70.5439339 86.9307879,63.4296587 92.4269209,58.8297383 C95.9539853,55.8782066 98.4307906,51.8889248 101.806002,48.9112229 C103.322188,47.5738572 102.165231,47.7130963 104.602902,47.888571 C106.240504,48.006337 107.885464,48.0512961 109.52641,48.0942421 C113.322394,48.1928837 117.124399,48.16772 120.921387,48.1811407 C128.56821,48.208653 136.179243,48.316689 143.818708,47.9164188 C147.213653,47.7385955 150.617965,47.6423024 154.00388,47.3282597 C155.895349,47.152785 159.251496,45.9405668 160.808488,46.8669256 C162.233362,47.7144383 163.71309,50.4817719 164.736257,51.615144 C167.153525,54.2935659 170.035717,56.3392052 172.862385,58.5354911 C178.756547,63.114945 181.732392,68.8666908 183.522515,76.023241 C185.305949,83.1532854 184.805905,89.76815 187.013456,96.78479 C187.401784,98.0184813 188.428965,100.14498 189.695296,98.2389151 C189.930434,97.8849461 189.869559,95.9390277 189.869559,94.819339 C189.869559,90.2995934 191.014141,86.9083772 190.999758,82.3591197 C190.943566,68.5271489 190.49637,50.4908308 180.14998,39.9204083 Z" id="react-path-196"></path>
<filter x="-0.8%" y="-2.0%" width="101.5%" height="108.0%" filterUnits="objectBoundingBox" id="react-filter-193">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0" type="matrix" in="shadowOffsetOuter1" result="shadowMatrixOuter1"></feColorMatrix><feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge>
</filter>
</defs>
<mask xmlns="http://www.w3.org/2000/svg" id="react-mask-195" fill="white">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#react-path-197"></use>
</mask>
<g xmlns="http://www.w3.org/2000/svg" id="Mask"></g>
<g xmlns="http://www.w3.org/2000/svg" mask="url(#react-mask-195)">
<g transform="translate(-1.000000, 0.000000)">
<mask id="react-mask-194" fill="white">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#react-path-196"></use>
</mask>
<g id="hair"><g xmlns="http://www.w3.org/2000/svg" id="Hairstyle/Wick" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="template-for-hairstyles" opacity=".184" transform="translate(1.000000, 0.000000)">
<mask id="hairstylewick-mask-2" fill="#ffffff">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#hairstylewick-path-1" fill="#ffffff"></use>
</mask>
<g id="Mask-Hair"></g>
</g>
<g id="Wick" transform="translate(64.000000, 22.300000)">
<path class="hairColor" d="M13.4413,160.16 C13.4413,160.16 12.3963,166.909 9.2623,170.681 C9.2623,170.681 19.7343,171.586 24.6553,166.711 C24.6553,166.711 24.2473,171.575 22.2033,175.347 C22.2033,175.347 29.0143,176.459 35.8253,171.436 C35.8253,171.436 35.8793,174.352 35.9233,176.809 C37.5833,176.694 39.2523,176.615 40.9413,176.615 L44.9413,176.615 L44.9413,157.226 C27.7043,149.038 15.3133,132.303 13.2463,112.496 C9.2963,111.938 5.9703,109.454 4.2343,106.027 L4.2343,147.355 C4.2343,147.355 4.0873,160.457 0.0003,164.329 C0.0003,164.329 8.9013,166.016 13.4413,160.16" id="Fill-4" fill="#4A312C" style="fill: rgb(217, 28, 28);"></path>
<path class="hairColor" d="M133.5829,106.1463 C131.8309,109.5103 128.5389,111.9453 124.6359,112.4973 C122.5689,132.3023 110.1799,149.0373 92.9419,157.2263 L92.9409,176.6153 L96.9409,176.6153 C98.6079,176.6153 100.2559,176.6923 101.8949,176.8033 C101.9369,174.3503 101.9919,171.4363 101.9919,171.4363 C108.8029,176.4593 115.6129,175.3463 115.6129,175.3463 C113.5699,171.5753 113.1619,166.7103 113.1619,166.7103 C118.0819,171.5853 128.5549,170.6813 128.5549,170.6813 C125.4219,166.9093 124.3759,160.1603 124.3759,160.1603 C128.9159,166.0163 137.8169,164.3293 137.8169,164.3293 C133.7299,160.4573 133.5829,147.3553 133.5829,147.3553 L133.5829,106.1463 Z" id="Fill-6" fill="#4A312C" style="fill: rgb(217, 28, 28);"></path>
<path class="hairColor" d="M112.3837,61.411 C112.3837,61.411 120.1617,65.499 120.1617,83.616 C120.1617,83.616 124.3837,87.112 124.3837,83.616 L124.3837,75.781 C124.3837,75.781 130.3097,75.942 133.5907,82.208 L133.5907,38.526 C133.5907,38.526 94.0077,-1.068 84.5637,0.022 C75.3547,1.084 69.2147,5.932 68.9127,6.174 C68.6107,5.932 62.4697,1.084 53.2617,0.022 C43.8177,-1.068 4.2347,38.526 4.2347,38.526 L4.2347,82.208 C7.5157,75.942 13.4417,75.781 13.4417,75.781 L13.4417,83.616 C13.4417,87.112 17.6627,83.616 17.6627,83.616 C17.6627,65.499 25.4417,61.411 25.4417,61.411 C25.4417,61.411 14.5857,56.099 34.1907,36.891 C53.1187,18.347 67.8857,33.575 68.8837,34.649 C68.8837,34.649 84.7057,18.347 103.6337,36.891 C123.2387,56.099 112.3837,61.411 112.3837,61.411" id="Fill-1" fill="#4A312C" style="fill: rgb(217, 28, 28);"></path>
<path class="hairColor" d="M92.9423,157.2264 L92.9413,170.5254 C118.7923,158.6644 123.6873,127.9354 124.5233,113.4234 C122.1713,132.8224 109.9093,149.1654 92.9423,157.2264" id="Fill-8" fill-opacity=".6" fill="#000" style="fill: rgb(217, 28, 28);"></path>
<path class="hairColor" d="M13.4716,114.3524 C14.2416,129.2804 19.1006,159.2004 44.9416,170.6934 L44.9416,157.2264 C28.2446,149.2944 16.0966,133.3444 13.4716,114.3524" id="Fill-10" fill-opacity=".6" fill="#000" style="fill: rgb(217, 28, 28);"></path>
</g>
</g></g>
<g id="glass">
<g filter="url(#filter0_d_0_1711)" transform="translate(60.000000, 75.000000)">
<path d="M70.9998 13.1111C59.9624 13.1111 58.3704 4.0266 35.6704 2.74074C12.9854 1.7168 5.81505 8.44949 5.7763 13.1111C5.81307 17.4043 4.64754 28.5613 19.3645 41.6296C34.1366 57.1421 49.2702 51.8818 54.6939 46.8148C60.135 44.4731 66.3402 23.4596 70.9998 23.4815C75.6595 23.5033 81.8646 44.4731 87.3057 46.8148C92.7294 51.8818 107.863 57.1421 122.635 41.6296C137.352 28.5613 136.187 17.4043 136.223 13.1111C136.185 8.44949 129.014 1.7168 106.329 2.74074C83.6293 4.0266 82.0373 13.1111 70.9998 13.1111Z" fill="#F4F4F4"></path>
<path d="M60.1293 23.4815C60.5103 15.8233 47.2156 7.64243 32.9529 7.92593C18.6973 8.22451 16.8417 17.3787 16.647 20.8889C16.2981 29.0221 25.0144 47.3038 41.1058 46.8148C57.1972 46.3058 59.9092 28.5344 60.1293 23.4815Z" fill="#2F383B"></path>
<path d="M81.8707 23.4815C81.4897 15.8233 94.7844 7.64243 109.047 7.92593C123.303 8.22451 125.158 17.3787 125.353 20.8889C125.702 29.0221 116.986 47.3038 100.894 46.8148C84.8028 46.3058 82.0908 28.5344 81.8707 23.4815Z" fill="#2F383B"></path>
</g>
<defs>
<filter id="filter0_d_0_1711" x="5.76709" y="2.63634" width="130.465" height="51.3032" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix>
<feOffset dy="2"></feOffset>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"></feColorMatrix>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_1711"></feBlend>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_0_1711" result="shape"></feBlend>
</filter>
</defs>
</g>
<g id="hat"></g>
<g id="beard"></g>
</g>
</g></g>
</g></g></g></g>
</svg>
</main>
</div>
</div>