停止CSS网格内容从扩展到填充单元格

问题描述 投票:0回答:1

我正在使用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,但这似乎无济于事。

html css css-grid
1个回答
0
投票

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

#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>
© www.soinside.com 2019 - 2024. All rights reserved.