一个div，里面有n个的子div（所以宽度随着n增大而减小），子div左右布局，左边定宽，右边不定宽且不撑开父级div

要实现这样的效果，可以使用CSS中的Flexbox布局，因为它非常适合动态分配空间给子元素。假设父容器是一个名为`.container`的`<div>`，每个子元素（`.child`）代表一个内部的`<div>`，左侧固定宽度，右侧自适应：

<div class="container">
  <!-- 这里有n个子div -->
  <div class="child fixed-left">
    <!-- 左侧内容 -->
  </div>
  <div class="child unfixed-right">
    <!-- 右侧内容 -->
  </div>
</div>

<style>
.container {
  display: flex;
  /* 设置最大宽度，避免所有子元素拉宽父级 */
  max-width: 100%; /* 或者一个具体的值 */
}

.child {
  flex: 0 0 calc(50% - 10px); /* 左侧占50%，减去两边留白10px */
  box-sizing: border-box; /* 包含边框和内填充 */
}

.fixed-left {
  width: 100px; /* 固定左侧宽度 */
}

.unfixed-right {
  flex-grow: 1; /* 右侧自适应剩余空间，flex-grow:1 表示按比例增长 */
}
</style>

在这个例子中，`.fixed-left`的宽度是固定的，`.unfixed-right`会占用剩余的空间，并且不会超出父元素的`max-width`限制。