Почему элемент `` занимает больше места, чем элементы `.sidebar` в этом макете Flexbox? ⇐ Html

[Anonymous]

У меня есть следующие html и css: < /p>

Код: Выделить всё

.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 */
}< /code>
  

I AM SIDEBAR

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?

I AM SIDEBAR

Поскольку оба. sidebar и p есть Shix-shrink: 1 , я ожидал, что они будут сокращаться , а и в конечном итоге примерно в порядке. /> Каждый .sidebar < /code> в конечном итоге принимает ~ 125px < /li>
< /code> в конечном итоге принимает ~ 1250px < /li>
< /ul>



Подробнее здесь: https://stackoverflow.com/questions/796 ... ts-in-this