让 flex 孩子的宽度超过 100% [重复]答案

【问题标题】：Make flex child grow over 100% width [duplicate]让 flex 孩子的宽度超过 100% [重复]
【发布时间】：2021-02-24 20:29:59
【问题描述】：

我有以下 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>

【问题讨论】：

display:inline-flex;min-width:100%

标签： css flexbox

【解决方案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>

【讨论】：

我怎么没想到

【解决方案2】：

您正在搜索错误的宽度。

这是诀窍：

  $("[data-c-width]").text($(".container")[0].scrollWidth);

演示：

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

* {
  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>

【讨论】：