https://codesandbox.io/s/mystifying-dijkstra-sk8sg
我将红色div的宽度设置为width:48px
,但它不是固定的:
如您所见,当我随着div宽度的增加/减小窗口大小时,也是如此。
但是,当我设置min-width:48px时,它是固定的,并且不会随着窗口大小的增加/减少:
<body>
<div flex-grow="1" style="display: flex; flex-flow: column nowrap; justify-content: center; align-items: stretch; height: 100%; background-color: rgb(92, 171, 125);">
<div style="display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; min-height: 48px; background-color: tomato;">
<div style="background-color: green;">header</div>
</div>
<div style="display: flex; flex-flow: row nowrap; flex-grow: 1; height: 100%;">
<div style="display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; min-width: 72px; height: calc(100%); background-color: purple;">
<div>pagebar</div>
</div>
<div style="display: flex; flex-flow: column nowrap; flex-grow: 1;">
<div style="display: flex; flex-flow: row nowrap; height: 100%;">
contents
</div>
<div style="display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; width: 100%; background-color: yellow; min-height: 32px;">
<div style="background-color: green;">footer</div>
</div>
</div>
</div>
</div>
</body>