Flex div 没有占用其父级的全高

Question

I have looked at the other questions on this site but none helped, this is NOT a duplicate question.

I want my button to be spaced out in the flex div away from the image below it under the media 900px query . So I tried to make my div (which contains the button and the image) to have height: 100%; but that did not work. So in conclusion, I need my child div to have 100% of its parent, so that the button is at the top of the div and the image is at the very bottom.

min-height also did not work.

 * { box-sizing: border-box; } html,body { /* removes all default margin and padding */ margin: 0; padding: 0; min-height: 100vh; } body { background-image: url(/Component\1\–\1svg); background-repeat: no-repeat; font-family: "Alata", sans-serif; background-color: #e5e5e5; display: flex; flex-direction: column; } header { display: flex; justify-content: center; align-items: center; height: 63px; flex: 0 0 63px; background: #009abc; box-shadow: 0px 4px 22px 4px rgba(0, 0, 0, 0.32); }.logoDiv:hover { background-image: url(4KGIF.gif); background-size: contain; background-repeat: no-repeat; width: 59px; height: 59px; }.logo { width: 60px; height: 60px; }.logo:hover { opacity: 0; }.content { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; flex: 1 0 auto; }.waveContainer { position: absolute; z-index: -1; max-height: 100vh; top: 0; left: 0; right: 0; bottom: 0; } #wave { position: absolute; z-index: -1; }.flexParent { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 1610px; bottom: 0; padding-right: 10px; padding-left: 10px; padding-bottom: 10px; z-index: 1; }.contact { width: 300px; height: 71px; border: none; background: #009ABC; border-radius: 18px; border-style: solid; border-color: #ffffff; font-family: Alata; font-style: normal; font-weight: normal; font-size: 30px; /* line-height: 71px; */ text-align: center; letter-spacing: 0.3em; color: #ffffff; }.contactContainer { z-index: 2; max-height: 500px; /* background-color: yellow; */ }.programmer { max-height: 500px; } #programmer { max-width: 100%; height: auto; } button:hover { cursor: pointer; color: black; border-color: black; background: #047f9b; transition: 1s; } button:active { padding: 0; } button:focus { outline: 0; padding: 0; } p::selection { background: #00bae2; }.upperTextContainer::selection { background: #00bae2; } span::selection { background: #000000; } /* MOZ SELECTION MOZ SELECTION MOZ SELECTION */ p::-moz-selection { background: #00bae2; }.upperTextContainer::-moz-selection { background: #00bae2; } span::-moz-selection { background: #000000; }.titleContainer { /* position: absolute; */ display: flex; flex-direction: column; max-width: 900px; height: 210px; display: flex; /* margin: 100px; */ margin-left: 100px; margin-top: 10vh; z-index: 1; }.lowerTextContainer, .upperTextContainer { /* position: absolute; */ justify-content: flex-end; }.upperTextContainer { font-size: 3.875rem; padding: 0; margin: 0; }.lowerTextContainer { font-family: Alata; font-style: normal; font-weight: normal; font-size: 1.875em; color: #000000; } #print,.print { display: none; visibility: hidden; } /* SECOND PAGE */ /* SECOND PAGE */ /* SECOND PAGE */ /* SECOND PAGE */ #waveTwo { position: absolute; z-index: -1; } /* MOBILE SUPPORT */ /* MOBILE SUPPORT */ /* MOBILE SUPPORT */ @media only screen and (max-width: 900px) {.content { /* position: relative; */ display: flex; flex-direction: column; align-items: space-betweem; justify-content: flex-end; flex: 1 0 auto; } button { max-width: 100%; height: 100%; }.contact { /* width: 250px; */ /* height: 61px; */ border: none; /* margin-bottom: 70px; */ background: #009ABC; border-radius: 18px; border-style: solid; border-color: #ffffff; font-family: Alata; font-style: normal; font-weight: normal; font-size: 1.875em; /* line-height: 71px; */ text-align: center; letter-spacing: 0.3em; color: #ffffff; } #programmer { max-width: 100%; height: auto; }.flexParent { display: flex; flex-direction: column-reverse; justify-content: space-between; align-items: center; width: 530px; height: 100%; width: 100%; /* max-width: 1610px; */ /* height: 650px; */ padding-right: 10px; padding-left: 10px; padding-bottom: 10px; }.titleContainer { /* position: absolute; */ display: flex; align-self: center; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; width: auto; height: 210px; display: flex; margin-left: 0px; /* margin: 100px; */ /* margin-top: 150px; */ z-index: 1; } /*.lowerTextContainer, .upperTextContainer { justify-content: center; align-items: center; } */.upperTextContainer { font-size: 3.875rem; padding: 0; margin: 0; }.lowerTextContainer { font-family: Alata; font-style: normal; font-weight: normal; text-align: center; font-size: 1.875em; color: #000000; } br { display: none; } }

 <:DOCTYPE html> <html lang="en"> <div class="content"> <div class="flexParent"> <div class="programmer"> <svg id="programmer" width="594" height="451" viewBox="0 0 594 451" fill="none" xmlns="http.//www.w3.org/2000/svg" preserveAspectRatio="none"> <g clip-path="url(#clip0)"> <path d="M287.383 398.746C159.532 389.016 7.06427 289.944 14.8267 187.933C22.589 85.9218 170.256 -9.0419 298.107 0.688383C425.958 10.4187 499.553 201.06 491.791 303.071C484.029 405.082 415.234 408.476 287.383 398.746Z" fill="#00D1FF" /> <path d="M298.106 415.131C445.502 415.131 564.991 407.81 564.991 398.779C564.991 389.748 445.502 382.427 298.106 382.427C150.709 382.427 31.2211 389.748 31.2211 398.779C31.2211 407.81 150.709 415.131 298.106 415.131Z" fill="#004150" /> <path opacity="0.1" d="M298.106 409.329C423.655 409.329 525.433 404.487 525.433 398.515C525.433 392.543 423.655 387.702 298.106 387.702C172.557 387.702 70.7791 392.543 70.7791 398.515C70.7791 404.487 172.557 409.329 298.106 409.329Z" fill="black" /> <path d="M111.919 451C173.731 451 223.839 446.631 223.839 441.242C223.839 435.852 173.731 431.483 111.919 431.483C50.108 431.483 0 435.852 0 441.242C0 446.631 50.108 451 111.919 451Z" fill="#004150" /> <path opacity="0.1" d="M111.919 447.537C164.569 447.537 207.25 444.648 207.25 441.084C207.25 437.52 164.569 434.631 111.919 434.631C59.2698 434.631 16.5889 437.52 16.5889 441.084C16.5889 444.648 59.2698 447.537 111.919 447.537Z" fill="black" /> <path d="M500.116 85.4526H103.48V396.669H500.116V85.4526Z" fill="#3F3D56" /> <path d="M297.285 127.983H199.436C199.28 127.984 199.125 127.953 198.981 127.894C198.836 127.834 198.705 127.747 198.595 127.636C198.484 127.526 198.396 127.395 198.337 127.251C198.277 127.107 198.246 126.952 198.246 126.796C198.246 126.64 198.277 126.485 198.337 126.341C198.396 126.196 198.484 126.065 198.595 125.955C198.705 125.845 198.836 125.757 198.981 125.698C199.125 125.638 199.28 125.608 199.436 125.608H297.285C297.6 125.609 297.901 125.734 298.124 125.957C298.346 126.18 298.47 126.481 298.47 126.796C298.47 127.11 298.346 127.412 298.124 127.635C297.901 127.857 297.6 127.983 297.285 127.983V127.983Z" fill="#F2F2F2" /> <path d="M404.397 141.047H250.498C250.183 141.047 249.881 140.922 249.659 140.699C249.436 140.476 249.311 140.174 249.311 139.859C249.311 139.544 249.436 139.242 249.659 139.02C249.881 138.797 250.183 138.672 250.498 138.672H404.397C404.553 138.672 404.708 138.702 404.852 138.762C404.996 138.822 405.127 138.909 405.237 139.02C405.347 139.13 405.435 139.261 405.495 139.405C405.554 139.549 405.585 139.703 405.585 139.859C405.585 140.015 405.554 140.17 405.495 140.314C405.435 140.458 405.347 140.589 405.237 140.699C405.127 140.809 404.996 140.897 404.852 140.956C404.708 141.016 404.553 141.047 404.397 141.047V141.047Z" fill="#F2F2F2" /> <path d="M298.236 180.238H200.386C200.071 180.238 199.769 180.112 199.546 179.89C199.324 179.667 199.198 179.365 199.198 179.05C199.198 178.735 199.324 178.433 199.546 178.21C199.769 177.987 200.071 177.862 200.386 177.862H298.236C298.55 177.862 298.853 177.987 299.075 178.21C299.298 178.433 299.423 178.735 299.423 179.05C299.423 179.365 299.298 179.667 299.075 179.89C298.853 180.112 298.55 180.238 298.236 180.238V180.238Z" fill="#F2F2F2" /> <path d="M342.648 128.221H314.623C314.308 128.221 314.006 128.096 313.783 127.873C313.561 127.65 313.435 127.348 313.435 127.033C313.435 126.718 313.561 126.416 313.783 126.193C314.006 125.971 314.308 125.846 314.623 125.846H342.648C342.963 125.846 343.265 125.971 343.487 126.193C343.71 126.416 343.835 126.718 343.835 127.033C343.835 127.348 343.71 127.65 343.487 127.873C343.265 128.096 342.963 128.221 342.648 128.221V128.221Z" fill="#F2F2F2" /> <path d="M342.648 167.174H314.623C314.308 167.174 314.006 167.049 313.783 166.826C313.561 166.603 313.435 166.301 313.435 165.986C313.435 165.671 313.561 165.369 313.783 165.147C314.006 164.924 314.308 164.799 314.623 164.799H342.648C342.963 164.799 343.265 164.924 343.487 165.147C343.71 165.369 343.835 165.671 343.835 165.986C343.835 166.301 343.71 166.603 343.487 166.826C343.265 167.049 342.963 167.174 342.648 167.174V167.174Z" fill="#F2F2F2" /> <path d="M342.648 180H314.623C314.467 180 314.312 179.97 314.168 179.91C314.023 179.851 313.892 179.763 313.782 179.653C313.671 179.543 313.583 179.412 313.524 179.267C313.464 179.123 313.433 178.969 313.433 178.812C313.433 178.656 313.464 178.502 313.524 178.357C313.583 178.213 313.671 178.082 313.782 177.972C313.892 177.861 314.023 177.774 314.168 177.714C314.312 177.655 314.467 177.624 314.623 177.625H342.648C342.804 177.624 342.959 177.655 343.103 177.714C343.247 177.774 343.379 177.861 343.489 177.972C343.6 178.082 343.687 178.213 343.747 178.357C343.807 178.502 343.838 178.656 343.838 178.812C343.838 178.969 343.807 179.123 343.747 179.267C343.687 179.412 343.6 179.543 343.489 179.653C343.379 179.763 343.247 179.851 343.103 179.91C342.959 179.97 342.804 180 342.648 180V180Z" fill="#F2F2F2" /> <path d="M389.673 180H361.648C361.333 179.999 361.032 179.874 360.81 179.651C360.587 179.429 360.463 179.127 360.463 178.812C360.463 178.498 360.587 178.196 360.81 177.974C361.032 177.751 361.333 177.625 361.648 177.625H389.673C389.829 177.624 389.983 177.655 390.128 177.714C390.272 177.774 390.403 177.861 390.514 177.972C390.624 178.082 390.712 178.213 390.772 178.357C390.832 178.502 390.863 178.656 390.863 178.812C390.863 178.969 390.832 179.123 390.772 179.267C390.712 179.412 390.624 179.543 390.514 179.653C390.403 179.763 390.272 179.851 390.128 179.91C389.983 179.97 389.829 180 389.673 180V180Z" fill="#F2F2F2" /> <path d="M227.223 141.047H199.198C198.884 141.047 198.581 140.922 198.359 140.699C198.136 140.476 198.011 140.174 198.011 139.859C198.011 139.544 198.136 139.242 198.359 139.02C198.581 138.797 198.884 138.672 199.198 138.672H227.223C227.538 138.672 227.84 138.797 228.063 139.02C228.286 139.242 228.411 139.544 228.411 139.859C228.411 140.174 228.286 140.476 228.063 140.699C227.84 140.922 227.538 141.047 227.223 141.047V141.047Z" fill="#F2F2F2" /> <path d="M297.404 320.374H199.555C199.24 320.374 198.938 320.249 198.715 320.026C198.492 319.803 198.367 319.501 198.367 319.186C198.367 318.871 198.492 318.569 198.715 318.346C198.938 318.124 199.24 317.999 199.555 317.999H297.404C297.719 317.999 298.021 318.124 298.244 318.346C298.467 318.569 298.592 318.871 298.592 319.186C298.592 319.501 298.467 319.803 298.244 320.026C298.021 320.249 297.719 320.374 297.404 320.374Z" fill="#F2F2F2" /> <path d="M296.929 346.501H199.08C198.765 346.501 198.463 346.376 198.24 346.153C198.017 345.93 197.892 345.628 197.892 345.313C197.892 344.998 198.017 344.696 198.24 344.474C198.463 344.251 198.765 344.126 199.08 344.126H296.929C297.244 344.126 297.546 344.251 297.769 344.474C297.992 344.696 298.117 344.998 298.117 345.313C298.117 345.628 297.992 345.93 297.769 346.153C297.546 346.376 297.244 346.501 296.929 346.501Z" fill="#F2F2F2" /> <path d="M297.167 359.564H199.317C199.161 359.565 199.006 359.534 198.862 359.475C198.718 359.415 198.586 359.328 198.476 359.217C198.365 359.107 198.278 358.976 198.218 358.832C198.158 358.688 198.127 358.533 198.127 358.377C198.127 358.221 198.158 358.066 198.218 357.922C198.278 357.778 198.365 357.647 198.476 357.536C198.586 357.426 198.718 357.338 198.862 357.279C199.006 357.219 199.161 357.189 199.317 357.189H297.167C297.323 357.189 297.478 357.219 297.622 357.279C297.766 357.338 297.898 357.426 298.008 357.536C298.119 357.647 298.206 357.778 298.266 357.922C298.326 358.066 298.357 358.221 298.357 358.377C298.357 358.533 298.326 358.688 298.266 358.832C298.206 358.976 298.119 359.107 298.008 359.217C297.898 359.328 297.766 359.415 297.622 359.475C297.478 359.534 297.323 359.565 297.167 359.564V359.564Z" fill="#F2F2F2" /> <path d="M105.722 290.551C106.184 292.541 107.153 294.376 107.746 296.331C108.74 299.606 108.656 303.133 109.648 306.409C110.064 307.784 110.667 309.104 110.966 310.509C111.663 313.785 110.645 317.174 109.382 320.276C108.118 323.377 106.579 326.436 106.169 329.76C105.88 332.101 106.295 334.744 108.1 336.264C109.973 337.841 112.695 337.734 115.135 337.524C116.011 337.5 116.876 337.32 117.689 336.993C119.554 336.11 120.34 333.902 120.777 331.884C122.238 325.122 121.821 318.113 121.396 311.208L120.285 293.15C120.071 289.674 119.842 286.125 118.771 282.787C118.381 281.573 117.702 279.119 116.593 278.344C115.494 277.576 112.358 277.542 110.998 277.478C104.617 277.178 104.688 286.085 105.722 290.551Z" fill="#FBBEBE" /> <path d="M112.792 223.877C111.489 223.195 109.847 223.489 108.588 224.249C107.371 225.082 106.306 226.116 105.438 227.307C102.622 230.745 99.6408 234.689 100.058 239.113C100.215 240.772 100.85 242.342 101.281 243.952C103.169 251.009 101.081 258.473 101.32 265.775C101.459 269.994 102.377 274.144 103.291 278.266C103.478 279.107 103.777 280.08 104.59 280.364C105.201 280.576 105.861 280.303 106.466 280.073C108.72 279.24 111.141 278.962 113.524 279.263C115.908 279.563 118.184 280.433 120.16 281.799C121.671 280.993 121.105 278.443 120.766 276.764C119.76 271.775 121.126 266.628 122.786 261.817C124.445 257.006 126.431 252.201 126.706 247.119C127.017 241.361 125.108 235.741 123.224 230.291C122.813 229.101 122.364 227.854 121.411 227.032C120.595 226.425 119.66 225.998 118.667 225.778C116.666 225.187 114.64 224.845 112.792 223.877Z" fill="#2F2E41" /> </g> <defs> <clipPath id="clip0"> <rect width="594" height="451" fill="white" /> </clipPath> </defs> </svg> </div> <div class="contactContainer"> <button class="contact" onclick="document.location.href='contact.html'"> VIEW </button> </div> </div> </div> <div id="print"> <p class="print"> YOU FOUND ME!! </p> </div> </body> </html>

CODEPEN

Answer 1

I think you can add bellow code to your flex child div.

flex: 1;