让弯曲的孩子长出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>

我如何使.容器将其宽度扩展到父级宽度的100%，以容纳他的所有子级？最终目标是，我想使用Javascript来检查子对象是否比父对象宽，如果是，我会添加左右箭头来左右移动内容(这是一个选项卡(。

这里有一个fiddle，正如您所看到的，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>

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>

Answer 2

您正在搜索错误的宽度。

技巧如下：

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

主题相关：分别理解offsetWidth、clientWidth、scrollWidth和-Height

演示：

$(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>