设置width

时间:2019-06-21 03:00:33

标签: css

https://codesandbox.io/s/mystifying-dijkstra-sk8sg

我将红色div的宽度设置为width:48px,但它不是固定的: enter image description here

如您所见,当我随着div宽度的增加/减小窗口大小时,也是如此。

但是,当我设置min-width:48px时,它是固定的,并且不会随着窗口大小的增加/减少: enter image description here

<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>

0 个答案:

没有答案