Question

我在父元素内有一个子元素。子级具有最小宽度设置，这使其（在某些屏幕尺寸下）比父元素宽。正确将孩子的宽度设置为最小宽度，但是父母的宽度似乎最大达到了原始屏幕宽度。我希望父母与孩子一起成长。我该如何实现？

.container {
  display: block;
  background-color: blue;
  width: auto;
}

.grid {
  min-width: 1000px;
  display: grid;
  padding: 10px;
  grid-gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, auto);
  
  margin-left: auto;
  margin-right: auto;
  align-items: start;
}

.grid > div { 
  background-color: yellow;
}

<div class="container">
  <div class="grid">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
    <div>E</div>
    <div>F</div>
    <div>G</div>
  </div>
</div>

在此示例中，“容器”（蓝色背景）比子“网格”（黄色框的网格）窄。如果向右滚动，您会看到蓝色背景停止在屏幕边缘，而黄色网格继续。我希望蓝色区域能够容纳子网格。

我尝试将容器上的width和min-width属性设置为自动和/或100％。我还尝试过将显示更改为内部块。这些都不起作用。

Answer 1

在width: fit-content元素上使用.container可以使它在必要时扩展到窗口范围之外。

.container {
  display: block;
  background-color: blue;
  width: fit-content;
}

.grid {
  min-width: 1000px;
  display: grid;
  padding: 10px;
  grid-gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, auto);
  
  margin-left: auto;
  margin-right: auto;
  align-items: start;
}

.grid > div { 
  background-color: yellow;
}

<div class="container">
  <div class="grid">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
    <div>E</div>
    <div>F</div>
    <div>G</div>
  </div>
</div>

使父母长到孩子的宽度

1 个答案: