为什么当我在其中放入任何内容时内容框会扩展并且我可以让它不扩展/保持固定的宽度/高度？答案

【问题标题】：Why is the content box expanding when I put anything in it and can I make it not expand/be at a fixed width/height?为什么当我在其中放入任何内容时内容框会扩展并且我可以让它不扩展/保持固定的宽度/高度？
【发布时间】：2021-10-18 01:11:50
【问题描述】：

我正在制作一个网站，其中一部分我制作了 3 个盒子的 flexbox 行，每当我将任何东西放入任何盒子时，它们的大小都会扩大并推开其他所有东西。无论我放入什么，如何使它不改变它的大小？代码如下：

/*---------CENTER----------*/

div.center-grid {
    display:flex;
    justify-content:center;
    
}

#grid1 {
    background-color:red;
    padding-left:250px;
    padding-right:250px;
    margin:20px;
    padding-bottom:650px;
}

#grid2 {
    background-color:green;
    padding-left:250px;
    padding-right:250px;
    margin:20px;
    padding-bottom:650px;
    position:static;
    max-width:0px;
    max-height:0px;
}

#grid3 {
    background-color:blue;
    padding-left:250px;
    padding-right:250px;
    margin:20px;
    padding-bottom:650px;
}

#ingrid1 {
    display:grid;
    
}

<!DOCTYPE HTML>
<meta charset="UTF-8">

<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="center-grid">
            <div id="grid1">
                grid1
            </div>
            <div id="grid2">
                <div id="ingrid1">
                    <image src="content/images/q1.png"></image>
                    <image src="content/images/q2.png"></image>
                </div>
            </div>
            <div id="grid3">
                grid3
            </div>
        </div>
    </body>
</html>

【问题讨论】：

标签： html css image web

【解决方案1】：

尝试在 css 中使用 max-width。 max-width 指定指定元素的最大宽度。

【讨论】：

将对象的宽度和高度设置为 0 有帮助，谢谢