List exceeds width of parent container

Question

I want to build a navigation in the header containing three items where the first two ones are aligned left and the third one is aligned right. Tried it by use of flexbox but there is an arror: The ul is exceeding the width of it's parent container.

header {
  width: 100%;
  background: #417690;
  margin-left: 10px;
  margin-right: 10px;
  font-size: 20px;
  height: 70px;
}

header ul {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  /* justify-content: center; */
}

header ul li {
  display: inline-block;
  padding-right: 15px;
  margin-left: 10px;
}

.filler {
  flex-grow: 1;
}

<header>
  <ul>
    <li><a href="#">Logo</a></li>
    <li><a href="#">New article</a></li>
    <li class="filler"></li>
    <li><a href="#">username</a></li>
  </ul>
</header>

How can I fix this? Tested in FF and Opera.

The filler item is completely unnecessary. Use a flex `auto` margin. https://stackoverflow.com/a/33856609/3597276 — Michael Benjamin, Oct 13 '17 at 12:32
@Michael_B Didn't like the filler and it's great that you provided a solution for doing without! — Sempervivum, Oct 14 '17 at 09:35

score 2 · Answer 1 · answered Oct 13 '17 at 06:49

Reset margin to zero and add box-sizing: border-box to all elements to include the padding in the size calculations. You may also reset the padding for the ul element - see demo below:

* { /* ADDED */
  box-sizing: border-box;
}

header {
  width: 100%;
  background: #417690;
  /*margin-left: 10px;
  margin-right: 10px;*/
  font-size: 20px;
  height: 70px;
}

header ul {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  /* justify-content: center; */
  padding: 0; /* ADDED */
}

header ul li {
  display: inline-block;
  padding-right: 15px;
  margin-left: 10px;
}

.filler {
  flex-grow: 1;
}

<header>
  <ul>
    <li><a href="#">Logo</a></li>
    <li><a href="#">New article</a></li>
    <li class="filler"></li>
    <li><a href="#">username</a></li>
  </ul>
</header>

Thanks, this fixes it indeed. What is the explanation? Does setting width to 100% result in a width of (100% + padding + margin + border)? — Sempervivum, Oct 13 '17 at 07:49
@Sempervivum In the absence of any `box-sizing` property, yes. — Mr Lister, Oct 13 '17 at 07:53

score 1 · Answer 2 · answered Oct 13 '17 at 06:47

1

Try this:

header ul {
    box-sizing: border-box;
    padding: 0;
}

answered Oct 13 '17 at 06:47

vortin

135
6

Thanks, this fixed it. – Sempervivum Oct 13 '17 at 07:49

List exceeds width of parent container

2 Answers2