Make flex child grow over 100% width

Question

I have the following 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>

How do I make the .container expand it's width over the 100% of the parent width in order to accomodate all his children? The end goal is that I want to use Javascript to check if the child is wider than the parent, if yes I'll add arrows left and right to move the content left and right (it's a tabber).

Here's a fiddle, as you can see javascript sees the same width for both elements, but the child should be larger than the parent:

$(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%` – Temani Afif Oct 21 '20 at 09:55 — Temani Afif, Oct 21 '20 at 09:55

score 3 · Accepted Answer · edited Feb 24 '21 at 12:29

Change display: flex; to 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>

How didn't I think of this – Jonas Grumann Oct 21 '20 at 11:11 — Jonas Grumann, Oct 21 '20 at 11:11

score 1 · Answer 2 · answered Oct 21 '20 at 09:54

You are searching for the wrong width.

Here is the trick:

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

Subject related: Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively

DEMO:

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

Make flex child grow over 100% width

2 Answers2

DEMO: