[👾 ErrorLog] flex 환경에서 부모 넓이보다 넓은 자식 엘리먼트

어떤 에러인가?
* 자식 태그가 부모 태그의 width의 길이를 상속받지 않음.
* 다른 환경에서 동일한 컴포넌트는 정상적으로 작동.
* `flex-direction: row`
* row 환경에선 태그가 가로로 흐르기 때문에 가로 사이즈는 자동적으로 줄여주지 않는다.

에러 메시지

에러 해결 방법

* `flex-direction: column`
* column 환경에선 태그가 세로로 흐르기 때문에 가로 길이는 부모의 길이를 상속받아 자동으로 줄여준다.

```js
export const Container = styled.div`
display: flex;
width: 100%;
margin: auto;
flex-direction: column; // row;

.content {
margin: 0 auto;
padding: 3.5rem 0;
border: 3px solid red;

@media screen and (max-width: 960px) {
margin: 0 2rem;
}
}
```

에러 해결을 위해 참고한 레퍼런스 링크
* https://studiomeal.com/archives/197

[Devlog Final 22일차 flex 환경에서 부모 넓이보다 넓은 자식 엘리먼트](https://velog.io/@shleecloud/Devlog-Final-22%EC%9D%BC%EC%B0%A8-flex-%ED%99%98%EA%B2%BD%EC%97%90%EC%84%9C-%EB%B6%80%EB%AA%A8-%EB%84%93%EC%9D%B4%EB%B3%B4%EB%8B%A4-%EB%84%93%EC%9D%80-%EC%9E%90%EC%8B%9D-%EC%97%98%EB%A6%AC%EB%A8%BC%ED%8A%B8)