/* body を縦方向の flex に */
body {
	display: flex;
	flex-direction: column;
	height: 100vh; /* 全体 */
}

header {
    flex: 0 0 auto;
    text-align: center;
    background-color: red;
    color: white;
    padding: 5px 0;
    font-weight: bold;
}
/* main に残り全部を使わせる */
main {
	flex: 1 1 auto;
	display: flex; /* 横並び */
	min-height: 0; /* これがないと iframe が縮まらない */
}

#info {
    flex: 0 0 220px;
    width: 200px;
    border-right: 1px solid gray;
}
#info p {
    margin: 20px auto;
    width: fit-content;
    font-weight: bold;
}
#info canvas {
    width: 80%;
    display: block;
    margin: 0 auto;
}

/* iframe は残り全部・高さも全部 */
main > iframe {
	flex: 1 1 auto;
	width: 100%;
	height: 100%;
	border: none;
}