Set A Child's Width Between Parent's Width And Max-width

I want to build a CSS menu with some restrictions: height and width of the parent

are unknown the number of

is unknown

must be not smaller than &

Solution 1:

Here's the problem with your approach:

• The ul is a child of the div.
• The ul is absolutely positioned within the boundaries of the div, because the div is the nearest positioned ancestor (position: relative)
• As a result, the ul cannot extend past the width of the div, which is set to inline-block.
• So the li items must wrap based on the width of the div and the max-width is ignored.

I suggest you try a different method.

With pure CSS and HTML table elements all your requirements can be met.

tr:first-child td span {
  display: inline-block;
  padding: 20px 30px;
  background: yellow;
}

tr:last-child td {
  max-width: 450px;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  background-color: lightblue;
}

li {
  background: orange;
  display: inline-block;
  margin: 2px;
  padding: 20px 25px;
}

<table>
  <tr>
    <td><span>Stabat mater dolorosa</span></td>
  </tr>
  <tr>
    <td>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
    </td>
  </tr>
</table>

jsFiddle

1. height and width of the parent <div> are unknown NO PROBLEM
2. the number of <li> is unknown NO PROBLEM
3. <ul> must be not smaller than <div> width YES
4. one row of <li> must contain as many <li> as possible with max-width of <ul> YES
5. No JavaScript YES
6. IE10 support YES

Share