0

I have a flex container that the position needs to be absolute. I also wish the size of the container is determined by its children.

But when I assigned position: absolute and display: flex for the parent, and assigned flex: 1 0 80px to its children. It seems the width of the container is not changed accordingly.

How do I fix this?

* {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
  position: absolute;
  display: flex;
  top: 40px;
  left: 40px;
  border: solid 1px rgba(0, 0, 0, 0.2);
}

ul li {
  flex: 1 0 80px;
  text-align: center;
}

ul li:not(:first-child) {
  border-left: inherit;
}
<ul>
  <li>layout</li>
  <li>text</li>
  <li>media</li>
  <li>form</li>
  <li>button</li>
  <li>somelongcontents</li>
</ul>
Hao Wu
  • 17,573
  • 6
  • 28
  • 60
  • Does this answer your question? https://stackoverflow.com/questions/20984488/how-do-i-set-a-flex-container-to-be-the-width-of-its-flex-items – yochanan sheinberger Apr 07 '21 at 06:30
  • @yochanansheinberger No... it has nothing to do with the abnormalty with `position: absolute`... – Hao Wu Apr 07 '21 at 06:34
  • it looks it's because of the `flex: 1 0 80px;` maybe that attribute doesn't works good with `display: flex;` on an absolute position. maybe you can work around with paddings or margins – Zander Apr 07 '21 at 08:04

0 Answers0