CSS Flexbox: Make .frame займите оставшееся пространство после. ⇐ Html

[Anonymous]

Привет и добрый день, чтобы кто -нибудь читал это. Для небольшого контекста я делаю свое портфолио и предпочитаю бэкэнд, а не на фронт, поэтому я не очень хорош в CSS и HTML. < /P>
Я знаю, что мы не должны применять изображения , но показывать изображение - лучший способ показать ожидаемый выход, который я хочу. Возьмите всю зеленую зону. Я пытался сделать ширину и высоту = 100%, но он все еще не занимает желаемое пространство < /p>

Код: Выделить всё

body {
background-color: rgba(66, 65, 65, 0.192);
font-family: Arial, sans-serif;
margin: 0;
}

h1, p {
color: rgba(0, 0, 0, 0.8);
text-align: center;
margin: 20px 0; /* Avoid large margins */
}

p{
font-size: 30px;

}

.profile-photo {
display: block;
margin: 20px auto; /* Center image */
width: 250px;
height: 200px;
border-radius: 20%;
object-fit: cover;
position: relative;
z-index: 2; /* Ensure it's above the square */
}

.square {
width: 100%;
height: 175px;
background-color: rgba(203, 137, 4, 0.619);
position: relative;
margin-top: -150px;
z-index: -1;
}

.frame {
border : black 2px solid; /*added to visualize the size of .frame*/
flex-grow: 1;
width: 90%;
max-width: 100%;
margin: 0 auto;
background-color: white;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
}

table {
width: 100%;
border-collapse: collapse;
border-radius: 20%;
}

th, td {
border: 1px solid #273b38; /* This is the border of the table */
padding: 8px;
text-align: left;
}

th {
background-color: #55f3f04d;  /* first colum */
}< /code>





My Portfolio
 


Welcome to My Website
Hi, I'm Gustavo, a cybersecurity and developmententhusiast learning C and C++!
[img]School_ID/TEST_IMAGE.jpg[/img]





Project Name
Description




Project 1
A brief description of Project 1.


Project 2
A brief description of Project 2.

Подробнее здесь: https://stackoverflow.com/questions/794 ... ter-square