Отзывчивый с flexbox

Question

Я пытаюсь создать адаптивную страницу, используя flexbox. До сих пор я был в состоянии центрировать мою страницу просто отлично, но сейчас не реагирует. Когда я уменьшаю свою ширину, моя коробка, содержащая внутреннюю рамку, текстовые сообщения и кнопки, не сжимается, чтобы уместиться на странице.

Я использую rem и% больше, я просто не знаю, чего мне не хватает.

https://jsfiddle.net/daezfo8w/

html{
    height: 100%; 
 }

 body{
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
     color: #fff;
     font-family: 'Roboto' , sans-serif;
     background: linear-gradient(to top, #36513b, #799d7e);
     line-height: 1.4rem;
 }



.inside-box{
    background: #d4d6d8;
    border-radius: 5px;
    box-shadow: 0 1.5px 0 0 rgba(29, 29, 29, 0.1);
    width: 65rem;
    height: 55rem;
    display: flex;
    flex-direction: column;
}

Answer 1

Во-первых, не использовать отображение: flex в теле

 body{

 height: 100vh;
 color: #fff;
 font-family: 'Roboto' , sans-serif;
 background: linear-gradient(to top, #36513b, #799d7e);
 line-height: 1.4rem;
 }

Во-вторых, для адаптивных сайтов используйте% для ширины в слоях, используйте rems для текста, paddings и т. Д. c, потому что rem - это нечто с определенным значением с и может быть больше ширины области просмотра ... поэтому измените это CSS

.inside-box{
background: #d4d6d8;
border-radius: 5px;
box-shadow: 0 1.5px 0 0 rgba(29, 29, 29, 0.1);
width:100%;
height: 55rem;
display: flex;
flex-direction: column;
}

https://jsfiddle.net/MAXXALANDER/1ak7s9yf/4/