弹性内容可以强制父网格元素的宽度吗？

Question

我有一个全宽组件，它由三部分组成：一个中央组件，其宽度由其（固定）内容（一个字符串）驱动，以及该中央元素左右两侧的两个窗格，它们应该同样占用剩余的宽度。

一种方法是使用 grid 显示并将列设置为 grid-template-columns: 1fr auto 1fr;:

#container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

<div id="container">
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultricies at quam vel efficitur. Donec dictum lorem eu dolor pulvinar facilisis. Fusce mollis egestas orci et consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
    pulvinar, sem nec eleifend tincidunt, neque eros porttitor arcu, nec porttitor sem felis id risus. Nulla posuere, lectus vitae auctor rhoncus, metus purus pellentesque ante, vel interdum ex metus eget nisl. Nunc feugiat ipsum pharetra, ultricies justo
    ac, condimentum risus.
  </div>
  <div>hello</div>
  <div>world</div>
</div>

它按预期工作：中心元素采用其 space，两个窗格（lorem ipsum 和 world）平分剩余的一份。

在我的实际应用程序中，我的左右窗格由 display: flex 驱动的元素填充。看起来这个设置覆盖了父元素的宽度，它应该是 1fr 但随着元素填充它而扩展，如下例所示：

#container {
  width: 600px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

#lpane {
  display: flex;
  flex-direction: row;
}

<div id="container">
  <div id="lpane">
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
  </div>
  <div>hello</div>
  <div>world</div>
</div>

为什么会这样？有没有办法强制父元素实际遵循其1fr的设置而不是展开，因为它充满了flex 元素（然后应流入新行，受父级宽度限制）？

Answer 1

容器没问题，就是内容溢出来了

将flex-wrap: wrap;设置为#lpane

#container {
  width: 600px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

#lpane {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

<div id="container">
  <div id="lpane">
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
    <div>something</div>
  </div>
  <div>hello</div>
  <div>world</div>
</div>

弹性内容可以强制父网格元素的宽度吗？

Can a flex content force the width of a parent grid element?

html

css

flexbox

css-grid