Question

我需要一个div才能拥有display: flex，flex-direction: column和flex: 1。但是由于某种原因，该div的内容会重新调整大小。

使用display: block不会调整内容的大小。

 body {
      margin: 0;
      display: flex;
      flex-direction: column;
      height: 100vh;
    }

    header {
      height: 2em;
      background: blue;
    }

    main {
      background: yellow;
      flex: 1;
      overflow-y: auto;
      /* Why display: flex resizes the articles */
      display: flex;
      flex-direction: column;
      /* If you use display: block its working (uncomment to test)*/
      /* display: block; */
    }

    article {
      height: 15em;
      border: 1px solid black;
      margin: 1em;
    }

    footer {
      background: green;
      height: 3em;
    }

    <body>
      <header></header>
      <main>
        <article></article>
        <article></article>
        <article></article>
      </main>
      <footer></footer>
    </body>

https://codepen.io/anon/pen/YdewKJ

Answer 1

请在您的CSS中添加以下代码：

article {
  flex-shrink: 0;
}

在flex grow容器中使用flex direction列

1 个答案: