0

I have a display flex container with column flex direction. It has bunch of children with different content and each having auto width to fit their contents. I want only specific elements' content to be wrapped so it has the same width as other elements. Here is what I tried so far:

body {
  display: flex;
  justify-content: center;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container,
.container > div {
  border: 1px solid grey;
  padding: 5px;
}
.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 5px;
}

.child {
  flex-grow: 1;
  max-width: 100%;
}

.wrapped-child {
  white-space: normal; /* This line isn't doing anything */
}
<div class="container">
  <div class="child">Some content</div>
  <div class="child">
    <div>
      Some fancy content
    </div>
    <div>Some more</div>
  </div>
  <div class="wrapped-child">
    <p>
      Here comes bunch of content that takes the most width but has to be
      multiline
    </p>
  </div>
</div>

How can I achieve this behavio in flexbox (of course without using any javascript)?

iamawebgeek
  • 2,713
  • 1
  • 18
  • 34
  • What is the wanted result? That the last line will wrap line instead of expanding the table? – Nils Kähler Feb 27 '23 at 11:30
  • @NilsKähler yes, exactly. the width of the container should be the same width as the max width of its widest child except the ones that should be wrapped. sorry if the wording is confusing – iamawebgeek Feb 27 '23 at 11:40
  • Will you only ever have _one_ wrapped child? Will the wrapped child always be the last one? If not, how should the wrapped child and its following siblings behave? – Oskar Grosser Feb 27 '23 at 12:02
  • Which element should be the one that sets the width of each row? – Sigurd Mazanti Feb 27 '23 at 13:00

0 Answers0