htmlcssflexbox

Why is the `<p>` element taking more space than the `.sidebar` elements in this Flexbox layout?

I have the following HTML and CSS:

.container {
  border: 2px solid black;
  width: 1500px;
  height: 700px;
  margin: 40px auto;
  display: flex;
  justify-content: center;
}

.sidebar {
  background-color: palevioletred;
  flex: 100%; /* shorthand for flex: 1 1 100% */
}

p {
  background-color: darkseagreen;
  margin: 0px;
  /* no flex explicitly set, so defaults to flex: 0 1 auto */
}
  <body>
<div class="container">
  <div class="sidebar">I AM SIDEBAR</div>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci quis
    hic error sint est suscipit, nesciunt, rerum minus exercitationem
    consequuntur eligendi, sed voluptates. Cumque obcaecati omnis ratione.
    Natus, veniam neque. Officia consequuntur laboriosam nemo commodi
    pariatur earum quae. Atque maxime nulla qui, numquam, blanditiis ipsa
    soluta ut, totam enim aut ad aliquam reprehenderit? Odit sint, ea
    incidunt veniam mollitia voluptatibus? Quo nulla ipsam necessitatibus.
    Perspiciatis porro voluptate pariatur, cumque tempora accusamus
    suscipit, totam, culpa aliquid dicta atque? Explicabo harum repellat at
    doloremque reiciendis a ratione quod odio. Earum, veniam deleniti?
    Minima soluta aperiam animi esse. Soluta blanditiis ducimus id omnis?
    Unde libero dolorem aspernatur harum cupiditate! Dolorem eum minima
    aperiam, vel neque officiis harum voluptatem hic nostrum vero,
    perspiciatis id. Provident quae optio incidunt accusantium architecto
    recusandae? Nobis veniam consectetur dicta, expedita provident repellat
    tempore blanditiis totam rerum quaerat soluta sunt voluptatibus nam
    temporibus labore vero doloribus harum quibusdam dolores? Itaque id non,
    adipisci corrupti quisquam tempore quod dolore? Eaque quaerat
    reprehenderit facilis, libero nulla consequuntur tempore fugit eius
    provident inventore laudantium quo maxime necessitatibus doloribus
    excepturi itaque nostrum vitae. Quia nulla suscipit ipsa aspernatur
    earum possimus unde aliquam corrupti qui, rerum eveniet architecto
    accusamus nisi hic laborum optio distinctio cupiditate numquam natus
    quaerat porro animi quam. Ratione, veritatis unde. Impedit debitis eos
    qui eveniet, nihil corrupti fugiat delectus tempore, tempora dolore
    quibusdam voluptatem minus obcaecati nostrum! Officiis, odit. Repellat
    corrupti doloremque excepturi accusantium suscipit asperiores
    reprehenderit. Aspernatur, modi? Explicabo. Quas eum perspiciatis
    incidunt labore repellat tempora quibusdam fuga accusamus esse sapiente
    aperiam sunt, necessitatibus saepe architecto voluptatibus eos! Ad
    adipisci exercitationem repellat amet ab doloremque nisi nostrum
    sapiente et! Fugiat eveniet quisquam beatae sunt non excepturi sequi
    repellendus quod maxime, libero provident aliquam quaerat adipisci
    necessitatibus expedita neque delectus, nostrum voluptatum dolorum!
    Voluptate obcaecati modi recusandae ea totam. Molestias?
  </p>
  <div class="sidebar">I AM SIDEBAR</div>
</div>
  </body>

Since both .sidebar and p have flex-shrink: 1, I expected them to shrink proportionally and end up taking roughly equal space.

However:


Solution

  • According to step 9.2.3.D of the flex layout algorithm, the flex-basis of the p element (i.e. "auto") is its max-content, assuming an infinite available width, so the three sections are shrunk proportionally in the ratio 100%:p-element's-max-content:100%.

    With the max-content of the p element being much, much larger than 100%, the sidebars are allocated according much less horizontal space than the p element.

    If you give the p element just enough content that it would fill one row of text, then the three sections will divide the horizontal space equally.