“具有预定义大小的 flex 容器中的元素”

huangapple go评论104阅读模式
英文:

Elements in flex container with predefined size

问题

我有一个包含两个容器的flex布局容器,如下所示:

  1. .flex {
  2. display: flex;
  3. justify-content: center;
  4. align-items: center;
  5. flex-direction: column;
  6. flex: 1;
  7. }
  8. .msger {
  9. display: flex;
  10. flex-flow: column wrap;
  11. justify-content: space-between;
  12. width: 80%;
  13. max-width: 80%;
  14. margin: 25px 10px;
  15. height: calc(100% - 50px);
  16. border: var(--border);
  17. border-radius: 5px;
  18. background: var(--msger-bg);
  19. box-shadow: 0 15px 15px -5px rgba(0, 0, 0, 0.2);
  20. min-width: 80%;
  21. }
  22. .chart-container {
  23. width: 80%;
  24. min-width: 80%;
  25. max-width: 80%;
  26. }
  1. <div class="flex" id="flex">
  2. <section class="msger" id="msger_id">
  3. .....
  4. </section>
  5. <div class="chart-container" id="chart">
  6. ....
  7. </div>
  8. </div>

现在的问题是所有元素都挤在一起。我希望msger占满整个屏幕高度,然后chart-container应该添加在下面,并且应该占据所需的空间(总共两个容器将占据超过屏幕高度的空间)。为此,我已经将msger添加了height: calc(100% - 50px);,但不知何故它没有占满整个屏幕高度。

如何实现这个目标?

英文:

I have a flex box container that contains two containers as follows:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .flex {
  2. display: flex;
  3. justify-content: center;
  4. align-items: center;
  5. flex-direction: column;
  6. flex: 1;
  7. }
  8. .msger {
  9. display: flex;
  10. flex-flow: column wrap;
  11. justify-content: space-between;
  12. width: 80%;
  13. max-width: 80%;
  14. margin: 25px 10px;
  15. height: calc(100% - 50px);
  16. border: var(--border);
  17. border-radius: 5px;
  18. background: var(--msger-bg);
  19. box-shadow: 0 15px 15px -5px rgba(0, 0, 0, 0.2);
  20. min-width: 80%;
  21. }
  22. .chart-container {
  23. width: 80%;
  24. min-width: 80%;
  25. max-width: 80%;
  26. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;flex&quot; id=&quot;flex&quot;&gt;
  2. &lt;section class=&quot;msger&quot; id=&quot;msger_id&quot;&gt;
  3. .....
  4. &lt;/section&gt;
  5. &lt;div class=&quot;chart-container&quot; id=&quot;chart&quot;&gt;
  6. ....
  7. &lt;/div&gt;
  8. &lt;/div&gt;

<!-- end snippet -->

The problem now is that everything is squeezed together. I would like that msger fills the full height of the screen and then chart-container should be added below and should take as much space as it needs (in total both containers will take more than the height of the screen). For this purpose I have added height: calc(100% - 50px); to msger but somehow it does not take the full screen height.

How can this be done?

答案1

得分: 1

一切挤在一起的原因是 &#39;display: flex&#39; 在 flex 类中。由于 &#39;flex&#39; 元素的高度未设置,它只占用内容的高度。

要解决此问题,您可以在 &#39;flex&#39; 元素中添加 &#39;height: 100vh;&#39;。这将使 flex 元素使用屏幕的高度。

  1. .flex {
  2. display: flex;
  3. justify-content: center;
  4. align-items: center;
  5. flex-direction: column;
  6. flex: 1;
  7. height: 100vh;
  8. }
英文:

The reason everything is squeezed together is because of &#39;display: flex&#39; in flex class. Since the height of the &#39;flex&#39; element is not set, it is taking only the height of the content.

To solve this, you can add &#39;height: 100vh;&#39; to the &#39;flex&#39; element. this would make the flex element use the height of the screen.

  1. .flex {
  2. display: flex;
  3. justify-content: center;
  4. align-items: center;
  5. flex-direction: column;
  6. flex: 1;
  7. height: 100vh;
  8. }

huangapple
  • 本文由 发表于 2023年8月5日 06:12:35
  • 转载请务必保留本文链接:https://go.coder-hub.com/76839359.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定