用 CSS;如何设置非溢出元素的样式以跨越父元素的 100%？

Question

我正在尝试让 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>

提前谢谢你:)

Answer 1

这是你想做的吗？

.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>

让所有 children 适合最宽的？

网格可用于重新计算每行的可用宽度。 （这里不需要 grid-area 或模板，它是单列，只有行可以通过 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>

用 CSS;如何设置非溢出元素的样式以跨越父元素的 100%？

With CSS; how to style the non-overflowing element to span 100% of parent?

css

overflow

width