时间戳

首页 > 解决方案 > 阻止 CSS 网格内容扩展以填充单元格

html - 阻止 CSS 网格内容扩展以填充单元格

问题描述

我正在编写一个带有 CSS 网格内可折叠侧边栏的 Web 应用程序。CSS 网格将整个 UI 划分为多个部分，侧边栏面板是其中一个部分的子组件。

我遇到的问题是我希望侧面板自动缩小到其内容的最小尺寸，在添加到 CSS 网格单元之前它会很好，此时它会扩展以填充整个单元格。

这是该问题的一个简单示例：

<style>
    #myGrid{
        display: grid;
        grid-template-areas:
            "g1 g2";
    }

    #panel{
        grid-area: g2;
        display: inline-block;
        background: #FFAAAA;
        height: 100%;
        width: auto;
        min-width: minmax(0, 1fr);
    }

    #panelContents{
        display: flex;
        flex-direction: row;
        height: 100%;
    }

    #collapseArrow{
        align-self: center;
        right: 0;
        top: 50%;
    }

    #block{
        grid-area: g1;
        width: 200px;
        height: 100%;
        background: #AAAAFF;
    }
</style>

<body>
    <div id="myGrid">
        <div id="block">
            Contents
        </div>
        <div id="panel">
            <div id="panelContents">
                <div id="collapseContents">
                    <div class="item">
                        Item1
                    </div>
                    <div class="item">
                        Item2
                    </div>
                    <div class="item">
                        Item3
                    </div>
                    <div class="item">
                        Item4
                    </div>
                    <div class="item">
                        Item5
                    </div>
                </div>
                <div id="collapseArrow">&lt;</div>
            </div>
        </div>
    </div>
</body>

知道如何解决这个问题吗？我试图让红色面板缩小以适应它的内容。我尝试将最小宽度更改为 0，但这似乎没有帮助。

编辑：这是 HTML5 游戏引擎的更复杂的 UI。左侧网格单元格是资产浏览器，红色面板是右侧编辑器窗口（右侧网格单元格）的简单属性面板，我试图仅在单元格的左侧部分显示，所以其余的右侧单元格可以是编辑器窗口。

标签： htmlcsscss-grid

解决方案

使用另一列将面板压缩到其内容宽度。

#myGrid {
  display: grid;
  grid-template-columns: 1fr auto; /* 1fr consumes all free space on the row */
  grid-template-areas: "g1 g2";
}

#block {
  grid-area: g1;
  background: #AAAAFF;
}

#panel {
  grid-area: g2;
  background: #FFAAAA;
}

#panelContents {
  display: flex;
}

#collapseArrow {
  align-self: center;
}
<div id="myGrid">
  <div id="block">
    Contents
  </div>
  <div id="panel">
    <div id="panelContents">
      <div id="collapseContents">
        <div class="item">Item1</div>
        <div class="item">Item2</div>
        <div class="item">Item3</div>
        <div class="item">Item4</div>
        <div class="item">Item5</div>
      </div>
      <div id="collapseArrow">&lt;</div>
    </div>
  </div>
</div>

推荐阅读