html - 如何禁止子元素从网格布局中的父元素扩展

Question

我有两个内部元素的网格布局，我希望第二个元素（bbbb 行）应该受到（aaaaa 行）的限制

<style>

#container {
    display: grid;
    width: 90%;
    justify-content: center;
    background: green;
    display: grid;
    grid-auto-flow: row;
}
#inner {
    display: grid;
    width: 100%;
    background: red;
}
#inner2 {
    display: grid;
    width: 100%;
    background: yellow;
}
</style>


<div id="container">
    <div id="inner">aaaaaaaaa</div>
    <div id="inner2">bbbbbbbbbbbbbbbb</div>
</div>

所以，这就是它现在看起来的样子 和它应该是的样子（bbb 的一部分被隐藏）好

标签： htmlcsscss-grid

Answer 1

你可以试试这个

#container {
  display: grid;
  width: 90%;
  justify-content: center;
  background: green;
  display: grid;
  grid-auto-flow: row;
}

#inner {
  display: grid;
  width: 100%;
  background: red;
}

#inner2 {
  display: grid;
  background: yellow;
  /* New */
  width: 0;
  padding-right: 100%;
  overflow: auto;
}

<div id="container">
  <div id="inner">aaaaaaaaa</div>
  <div id="inner2">abcdefhijklmnopqrst</div>
</div>

解释：

width: 0;丢失内容定义的宽度

padding-right: 100%;填充的百分比是根据父级的宽度计算的，在这种情况下，它是由第一个元素定义的不可见网格列。

overflow: auto;隐藏溢出，不知道你想如何处理它。