Question

我有一个全宽的组件，它由三部分组成：一个宽度由其（固定）内容（一个字符串）驱动的中心部分和两个从该中心元素左右两个窗格的部分，它们应该同等地占用剩下的部分宽度。

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

＆＃13;

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

＆＃13;

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

＆＃13;

它按预期工作：中心元素占用其空间，两个窗格（ lorem ipsum 和 world ）均等分享剩余的窗格。

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

＆＃13;

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

＆＃13;

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

＆＃13;

为什么会这样？有没有办法强制父元素实际遵循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>

flex内容是否可以强制父网格元素的宽度？

1 个答案: