如何防止 CSS 网格布局中的项目增长以适应其内容？

Question

我正在尝试将可滚动内容插入到 CSS 网格布局中，而包含可滚动内容的网格布局插槽不会自动增长以适应该内容。

我希望网格项的大小与没有可滚动内容的大小相同。

我发现将可滚动内容的容器高度设置为固定值会产生所需的结果，但我事先不知道该值应该是多少。 也许可以计算 JavaScript 中的值，但除非这是唯一的方法，否则我不希望这样做。 我希望它基于如果该内容不存在则可用的空间。

在下面的示例中，当您单击“大量输出”按钮时， #right1 div 的高度从 300px 增长到更大的值。 单击此按钮时，我希望#right1的高度保持不变。 我本质上想让它表现得好像#output_container的高度设置为固定值。 但我不想手动指定固定值，因为我希望它使用所有可用空间。 #output_container的高度当前设置为 100%。 这使它的大小正确，除非它的子 div ( #output ) 强制它增长。 我想防止这种类型的增长，因为该内容是可滚动的。 没有必要使#output_container更大以查看该内容。

我尝试在#right1中使用网格和弹性布局来指定#output_container应该使用#right1中剩余的垂直空间。 但是， #output_container仍然基于 #output_container 内部的#output div #output_container ，我不希望它这样做。

 function showSize(selector) { const a = document.querySelector(selector); const p = a.querySelector('p'); p.textContent = `${getComputedStyle(a).width} x ${getComputedStyle(a).height}`; } function showSizes() { showSize('#left'); showSize('#right1'); showSize('#right2'); window.setTimeout(showSizes, 100); } function writeOutput(lines) { const output = document.querySelector('#output'); let text = ''; for (let i = 0; i < lines; i++) { for (let j = 65; j < 91; j++) { text += String.fromCharCode(j); } text += "\n"; } output.textContent = text; output.scrollTop = output.scrollHeight; } document.querySelector('#small').addEventListener('click', () => writeOutput(5)); document.querySelector('#large').addEventListener('click', () => writeOutput(50)); writeOutput(5); showSizes();

 * { box-sizing: border-box; margin: 0; padding: 0; } #output_container { /* Setting the height to 100% makes it the right size, unless its child div forces it to grow. I want to prevent this type of growth, because the child content is scrollable. */ height: 100%; /* Setting the height to a fixed size works, but I don't know in advance what the size should be in order for the Output panel to be be size that it would have been if this content were not there. */ /* height: 170px; */ background: lightseagreen; } #output { background-color: hsl(0, 0%, 83%); min-height: 50px; max-height: 100%; padding: 0.5em; overflow: auto; }.pre { white-space: pre; font-family: monospace; }.pre:after { /* Allows user to see a trailing line break. */ content: ''; } #grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "left right1" "left right2"; } #left { grid-area: left; background: lightskyblue; display: flex; flex-direction: column; // min-height: 800px; } #grid > div { padding: 10px; overflow: hidden; } #right1 { grid-area: right1; background: seagreen; min-height: 300px; display: grid; grid-template-rows: auto auto 1fr; } #right2 { grid-area: right2; background: lightsalmon; min-height: 300px; } h1 { margin: 0.5rem 0; } button { margin: 0.25rem; }

 <div id="grid"> <div id="left"> <p></p> <button id="small">Small amount of output</button> <button id="large">Large amount of output</button> </div> <div id="right1"> <p></p> <h1>Output</h1> <div id="output_container"> <div id="output" class="pre"></div> </div> </div> <div id="right2"> <p></p> </div> </div>

Answer 1

解决方法是添加position: relative; 到我不想增长的容器（ #output_container ）和position: absolute; width: 100%; position: absolute; width: 100%; 到它的孩子（ #output ），其内容导致了父容器的增长。

 function showSize(selector) { const a = document.querySelector(selector); const p = a.querySelector('p'); p.textContent = `${getComputedStyle(a).width} x ${getComputedStyle(a).height}`; } function showSizes() { showSize('#left'); showSize('#right1'); showSize('#right2'); window.setTimeout(showSizes, 100); } function writeOutput(lines) { const output = document.querySelector('#output'); let text = ''; for (let i = 0; i < lines; i++) { for (let j = 65; j < 91; j++) { text += String.fromCharCode(j); } text += "\n"; } output.textContent = text; output.scrollTop = output.scrollHeight; } document.querySelector('#small').addEventListener('click', () => writeOutput(5)); document.querySelector('#large').addEventListener('click', () => writeOutput(50)); writeOutput(5); showSizes();

 * { box-sizing: border-box; margin: 0; padding: 0; } #output_container { /* Setting the height to 100% makes it the right size, unless its child div forces it to grow. I want to prevent this type of growth, because the child content is scrollable. */ height: 100%; /* Setting the height to a fixed size works, but I don't know in advance what the size should be in order for the Output panel to be be size that it would have been if this content were not there. */ /* height: 170px; */ background: lightseagreen; position: relative; } #output { position: absolute; width: 100%; background-color: hsl(0, 0%, 83%); min-height: 50px; max-height: 100%; padding: 0.5em; overflow: auto; }.pre { white-space: pre; font-family: monospace; }.pre:after { /* Allows user to see a trailing line break. */ content: ''; } #grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "left right1" "left right2"; } #left { grid-area: left; background: lightskyblue; display: flex; flex-direction: column; // min-height: 800px; } #grid > div { padding: 10px; overflow: hidden; } #right1 { grid-area: right1; background: seagreen; min-height: 300px; display: grid; grid-template-rows: auto auto 1fr; } #right2 { grid-area: right2; background: lightsalmon; min-height: 300px; } h1 { margin: 0.5rem 0; } button { margin: 0.25rem; }

 <div id="grid"> <div id="left"> <p></p> <button id="small">Small amount of output</button> <button id="large">Large amount of output</button> </div> <div id="right1"> <p></p> <h1>Output</h1> <div id="output_container"> <div id="output" class="pre"></div> </div> </div> <div id="right2"> <p></p> </div> </div>