CODEWITHSUNDEEP
htmlcss
opportunityr
opportunityr

Reputation: 183

Overflow:scroll container shrinks children instead of letting them expand as much as they need

I have a container (the ul element) that I want to be scrollable when overflowed. The problem is that the children (lis) don't expand with content (as) and instead get shrinked for some reason, instead of taking up all of the space necessary to display all content on the same line. This can be seen on the third li, where I added more content and instead of the text being all on the same line and the li expanding, it gets squished.

#container {
  width: 300px;
  height: 100px;
}
li {
  list-style: none;
  margin-right: 20px;
  display: flex;
}
li a {
  border: 1px solid black;
  border-radius: 50px;
  color: black;
  text-decoration: none;
  padding: 10px;
  margin: auto;
  width: auto;
}
ul {
  display: flex;
  width: 100%;
  overflow-x: scroll;
  padding: 0;
  margin: auto 0 auto 0;
  height: 100%;
}
<div id="container">
  <ul>
    <li>
      <a href="javascript:void(0);">Content</a>
    </li>
    <li>
      <a href="javascript:void(0);">Content</a>
    </li>
    <li>
      <a href="javascript:void(0);">Content Content Content</a>
    </li>
    <li>
      <a href="javascript:void(0);">Content</a>
    </li>
    <li>
      <a href="javascript:void(0);">Content</a>
    </li>
  </ul>
</div>

How can I get them to expand with the text and display it all on one line?

Upvotes: 2

Views: 287

Answers (1)

Waleed Iqbal
Waleed Iqbal

Reputation: 1322

Add the property white-space: nowrap; in the li a CSS styles.

Upvotes: 3

Related Questions