플렉스 박스 유무에 관계없이 사용 가능한 공간을 채우십시오.

Question

내 <main> 요소 안에는 div32가 있고, 각각은 .dataCard입니다. 각 .dataCard은 동일한 최소 크기를 가지고 있지만, .dataCard에 콘텐츠를 추가하자마자 나는 이상하게 행동하는 레이아웃을 발견했습니다.

<main> 요소는 각각 .dataCard을 포함하는 두 개의 열로 구분됩니다. .dataCard의 순서가 왼쪽 열에, 오른쪽 열에 1 행, 왼쪽 열에 1 행 등이 필요하기 때문에이 작업을 수행했습니다.

그러나 내용으로 .dataCard을 채울 때 다른 모든 카드를 내용물 아래로 밀어 넣습니다.

.dataCard으로 사용 가능한 공간을 채우려면 어떻게해야합니까? <main> 요소를 포함하는 가능한 한 높이가 작아야합니다.

오른쪽 링크에는 두 번째 카드가 있지만 두 번째 카드 끝에는 왼쪽 칸의 세 번째 카드가 시작됩니다.

어떻게하면 왼쪽 열을 위로 이동시킬 수 있습니까? 다시 말하면, 카드를 flexbox가 있거나없는 사용 가능한 공간에 맞출 수 있습니까?

나는 모든 도움을 주시면 감사하겠습니다! 귀하의 질문에서

Here is the link: https://googledrive.com/host/0BwJVaMrY8QdcVDBweWk2UXlfTVE/KE.html

Answer 1

나는 당신이 어떤 공백없이 상자 전체 페이지를 채우기 위해 원하는 것을 이해합니다.

This is what, exactly you wanted.