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

Question

I have a full-width component which is made of three parts: a central one which width is driven by its (fixed) content (a string) and two panes left and right from that central element which should equally take the remaining width.

One way to do that is to use a grid display and set the columns as 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>

It works as expected: the central elements takes its space, and both panes (lorem ipsum and world) equally share the remaining one.

In my real application, I have the left and right pane filled in by elements, which are driven by display: flex. It looks like this setup overrides the width of the parent element, which is supposed to be 1fr but is extended as the elements fill it in, like in the example below:

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

Why is it so? Is there a way to force the parent element to actually follow its setting of 1fr and not expand as it is filled with flex elements (which should then flow into a new line, constrained by the width of the parent)?

An initial setting on grid items (and flex items) is `min-width: auto`. This means that an item cannot be smaller than the width of its content. You need to override this default behavior. One method is `overflow: hidden`. https://jsfiddle.net/pacujwy9/ — Michael Benjamin, Jun 14 '17 at 03:07
@Michael_B: thanks. Your comment is an exact answer to my question (how to force the parent to behave as expected), but my actual intent was to have the content flow (and therefore not to force the parent width - which is answered by Daniel). Thanks for the links, they are a good read. — WoJ, Jun 14 '17 at 08:08

score 3 · Accepted Answer · answered Jun 13 '17 at 19:55

The container is fine, it is just the content overflowing.

set flex-wrap: wrap; to #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?

1 Answers1