Flex container with overflow

Question

I am trying to display a circle inside a flex container, but the content is squashed.

If the list has fewer items it displays correctly. How can I fix this?

.container {
  max-height: 100px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  border: 5px solid black;
}

.circle {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: 5px solid #555;
  border-radius: 50%;
  width: 25px;
  height: 25px;
}

<body>
  <div class="container">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ul>
    <div class="circle"></div>
  </div>

I tried add flex: 1 0 auto; to the container but didn't work.

what if you remove the max height? – godfather Jun 11 '20 at 18:52 — godfather, Jun 11 '20 at 18:52

score 2 · Accepted Answer · answered Jun 11 '20 at 18:54

Add flex-shrink: 0 to .circle

.container {
  max-height: 100px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  border: 5px solid black;
}

.circle {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: 5px solid #555;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  flex-shrink: 0
}

<div class="container">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
  <div class="circle"></div>
</div>

Flex container with overflow

1 Answers1