CSS_height & width 100% 설정시 부모 상속에 관해서

📢 1. display: flex;와 height: 100%

✅ 부모 요소가 명확한 height 값을 가지고 있다면
→ height: 100%이 정상적으로 부모의 높이를 따라감.

❌ 부모 요소가 height: auto;이거나 min-height만 설정되어 있다면
→ height: 100%이 적용되지 않고, 내용만큼만 높이를 가짐.

💡 즉, 부모가 height: 60px;을 가지고 있으면 height: 100%이 정상적으로 60px이 됨.
하지만 display: flex;인 부모 컨테이너가 align-items: center;라면, 자식 요소가 내용만큼만 높이를 가지게 됨

📌 해결 방법:
부모가 display: flex;일 때, 자식 요소가 부모의 높이를 따라가도록 하려면 align-items: stretch;을 사용해야 해.

.parent {
  display: flex;
  align-items: stretch; /* 자식 요소들이 부모의 높이를 따라가게 함 */
  height: 60px;
}
.child {
  height: 100%; /* 부모 높이를 따라감 */
}

---

📢 2. display: flex;와 width: 100%

✅ 부모가 width: 500px; 같은 고정된 값을 가지고 있다면
→ width: 100%이 정상적으로 부모의 너비를 따라감.

❌ 부모가 width: auto;라면
→ width: 100%이 적용되지 않고, 내용물 크기만큼만 너비를 가짐.

💡 즉, 부모가 display: flex;이고 자식 요소가 width: 100%이면, 부모의 너비가 명확하지 않으면 자식의 너비도 자동으로 줄어듦.

📌 해결 방법:
부모의 display: flex;가 적용된 상태에서, 자식 요소가 부모의 너비를 따라가도록 하려면 flex-grow: 1;을 사용하면 돼.

.parent {
  display: flex;
  width: 500px;
}
.child {
  width: 100%; /* 부모 너비를 따라감 */
}

또는 flex-grow: 1;을 사용하면 남은 공간을 자동으로 채워줌.

.parent {
  display: flex;
  width: 500px;
}
.child {
  flex-grow: 1; /* 부모 안에서 남은 공간을 차지함 */
}

---

📢 3. flex 레이아웃에서 height와 width를 제대로 적용하는 법

속성	부모 요소 설정	자식 요소 설정	결과
높이 자동 확장	display: flex; align-items: stretch; height: 60px;	height: 100%;	부모 높이를 그대로 따라감
너비 자동 확장	display: flex; width: 500px;	width: 100%;	부모 너비를 그대로 따라감
남은 공간 채우기	display: flex;	flex-grow: 1;	자동으로 부모의 남은 공간을 차지함

---

📢 결론

• height: 100%이 부모를 따라가려면 부모의 height가 명확해야 함 (height: auto면 안 됨).

• 부모가 display: flex; align-items: center;이면, 자식 요소의 height: 100%이 무시될 수 있음 → 해결하려면 align-items: stretch; 사용.

• flex-grow: 1;을 사용하면 자식 요소가 부모의 남은 공간을 채울 수 있음.

+) 이렇게 해도 오류가 안잡혔는데 이유가 padding 때문이였음. padding말고 margin으로 주니까 해결됨