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:
- Each
.sidebarends up taking ~125px - The
<p>ends up taking ~1250px