用CSS;如何设置非溢出元素的样式以覆盖父对象的100％？

问题描述

我正在尝试让Non overflowing DIV具有父级的宽度。

.parent {
  width: 300px;
  height: 100px;
  background-color: lightblue;
  overflow: auto;
}

.parent .child-1 {
    width: 800px;
    background-color: lightgreen;
}

.parent .child-2 {
  background-color: lightyellow;
}

<div class="parent">
  <div class="child-1">Overflowing DIV</div>
  <div class="child-2">Non Overflowing DIV</div>
</div>

预先感谢您：）

解决方法

这是您要尝试做的吗？

.parent {
  width: 300px;
  height: 100px;
  background-color: lightblue;
  overflow: auto;
  display:grid; 
  grid-auto-rows:min-content;
}

.parent .child-1 {
    width: 800px;
    background-color: lightgreen;
}

.parent .child-2 {
  background-color: lightyellow; 
  
}

<div class="parent">
  <div class="child-1">Overflowing DIV</div>
  <div class="child-2">Non Overflowing DIV<!-- but does fit to the widest--></div>
</div>

让所有孩子都适合最广泛的孩子吗？

网格可用于重新计算每行可用的宽度。 （这里不需要网格区域或模板，它是单列，仅行可以通过grid-auto-rows缩小到自己的高度。）

---

根据Temani Afif的评论，align-content: start也可以将行缩小到其内容。

.parent {
  width: 300px;
  height: 100px;
  background-color: lightblue;
  overflow: auto;
  display:grid; 
  align-content: start;
}

.parent .child-1 {
    width: 800px;
    background-color: lightgreen;
}

.parent .child-2 {
  background-color: lightyellow; 
  
}

<div class="parent">
  <div class="child-1">Overflowing DIV</div>
  <div class="child-2">Non Overflowing DIV<!-- but does fit to the widest--></div>
</div>