0
以下のコードは、私が抱えている問題を示しています。高さのブラウザウィンドウを縮小すると、ウィンドウラッパーはマスターラッパーで縮小されません。フレックスボックス：オーバーフローオートとウィンドウサイズ
マスターラッパーがブラウザのサイズに従っているときにウインドウラッパーが収縮（高さ）することを許可していないものを教えてもらえますか？
<STYLE>
html, body, .viewport {
width: 100%;
height: 100%;
margin: 0;
}
/* WRAPPERS */
#master-wrapper {
width: 100%;
height: 100%;
min-width: 800px;
min-height: 500px;
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: 1em;
display: flex;
flex-direction: column;
flex: auto;
border-style:solid;
border-width:5px;
}
#window-wrapper {
background-color:#ffffff;
border-style:solid;
border-width:5px;
margin:30px;
width: 100%;
display-flex;
flex-grow:1;
}
#page-head {
width: 90%
margin-top:12px;
width:600px;
margin-top:10px
margin-bottom:10px;
margin-right:auto;
margin-left:auto;
text-align:center;
border-style:solid;
border-width:5px;
}
#nav-bar-wrapper {
vertical-align: top;
text-align: left;
}
#nav-bar{
margin:10px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
align-content: center;
top: 0;
border-style:solid;
border-width:5px;
}
#area-wrapper {
vertical-align: top;
min-height: 300px;
max-height: 800px;
margin:20px;
text-align: left;
border-style:solid;
border-width:5px;
display: flex;
flex-direction: column;
flex-grow: 1;
overflow: auto;
}
#area-header {
height: 30px;
line-height: 30px;
text-align: center;
margin-left: 30px;
margin-right: 30px;
margin-top: 15px;
flex-direction: column;
font-size: 1em;
border-style:solid;
border-width:5px;
}
#area-section {
vertical-align: top;
text-align: left;
margin-left: 25px;
margin-right: 25px;
display: flex;
flex-direction: row;
flex-grow: 1;
flex-wrap: wrap;
justify-content: space-around;
#row {
text-align:middle;
margin:75px;
}
#bottom-wrapper {
height: 40px;
margin-top:15px;
margin-bottom:15px;
margin-right:auto;
margin-left:auto;
border-style:solid;
border-width:5px;
font-size:1em;
background-color:gray;
}
</STYLE>
<body>
<div id="master-wrapper">master wrapper
<div id="window-wrapper">window wrapper
<div id="page-head">page head
<div id="nav-bar-wrapper">nav bar wrapper
<div id="nav-bar">nav bar</div>
</div>
<div id="area-wrapper">area wrapper
<div id="area-header">area header</div>
<div id="area-section">
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
<div>"bunch of info"</div>
</div>
</div>
</div>
</div>
<div id="bottom-wrapper">
bottom wrapper
</div>
</div>
</body>
フレックスアイテムの初期設定は 'min-height：auto'です。これは、アイテムがそのコンテンツのサイズより小さくならないことを意味します。そのため、 '＃window-wrapper'は'＃master-wrapper 'で高さが縮むことができません。デフォルトを上書きするには、 '＃-window-wrapper'に' min-height：0'を適用してください。 –
コードにはさまざまな構文エラーがあります。 '＃window-wrapper'には' display-flex'があり無効です。いくつかのセミコロンもありません。固定されると、レイアウトにも違いがあります。 –
マイケルありがとうございました。私はフレックスボックスで多くのフロントエンドの仕事をしていないし、1年前に非常に似た質問をしていたことを全く忘れてしまった。これは私の問題を解決しました。この質問は重複しているので削除してください。 – Tim