I’m working with a flex layout and trying to make a .sidebar element take up 100% of the space, but it's not behaving as expected. Even after setting flex: 100%;, the sidebar is only getting a small portion of the space.
.container { border: 2px solid black; width: 1500px; height: 700px; margin: 40px auto; display: flex; justify-content: center;}.sidebar { background-color: palevioletred; flex: 100%;}p { background-color: darkseagreen; margin: 0px; flex-grow: 1;}<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>I expected each .sidebar to take the full width of the container (or at least grow significantly), but both sidebars are very narrow.
My Question:
Why isn’t flex: 100% making the sidebar occupy 100% of the container’s width?