css - 使 flex child 增长超过 100% 宽度

Question

我有以下 HTML：

<div class="wrapper">
  <div class="container">
    <div class="child">
      1
    </div>
    <div class="child">
      2
    </div>
    <div class="child">
      3
    </div>
    <div class="child">
      4
    </div>
  </div>
</div>

如何使 .container 将其宽度扩展为父宽度的 100% 以容纳他的所有孩子？最终目标是我想使用 Javascript 来检查孩子是否比父母宽，如果是，我将添加左右箭头来左右移动内容（这是一个 tabber）。

这是一个小提琴，你可以看到 javascript 看到两个元素的宽度相同，但是子元素应该大于父元素：

$(function() {
    $("[data-w-width]").text($(".wrapper").width());
  $("[data-c-width]").text($(".container").width());
})

* {
  box-sizing: border-box;
}

html, body {
  overflow: hidden;
}


.wrapper {
  width: 100%;
}

.container {
  width: auto;
  display: flex;
}

.child {
  width: 200px;
  background: #dadada;
  border: 1px solid black;
  flex-shrink: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="container">
    <div class="child">
      1
    </div>
      <div class="child">
      2
    </div>
    <div class="child">
      3
    </div>
    <div class="child">
      4
    </div>
  </div>
</div>
<div>
  wrapper width: <span data-w-width>0</span>
</div>
<div>
  container width: <span data-c-width>0</span>
</div>

标签： cssflexbox

Answer 1

更改display: flex;为display: inline-flex;

$(function() {
    $("[data-w-width]").text($(".wrapper").width());
  $("[data-c-width]").text($(".container").width());
})

* {
  box-sizing: border-box;
}

html, body {
  overflow: hidden;
}


.wrapper {
  width: 100%;
}

.container {
  display: inline-flex;
}

.child {
  width: 200px;
  background: #dadada;
  border: 1px solid black;
  flex-shrink: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="container">
    <div class="child">
      1
    </div>
      <div class="child">
      2
    </div>
    <div class="child">
      3
    </div>
    <div class="child">
      4
    </div>
  </div>
</div>
<div>
  wrapper width: <span data-w-width>0</span>
</div>
<div>
  container width: <span data-c-width>0</span>
</div>