Make child div width 100% of container with overflow-x using Flexbox

Question

I'm trying to make a child div of a Flexbox container with overflowing-x content have 100% of the width WITH the overflow, but I can't figure out it, have made several searches and couldn't find a solution;

Can someone help me?

Fiddle: https://codepen.io/joaovtrc/pen/MWaaxKr

HTML:

<div class="test-container">

  <div class="test-item-overflow">
    overflowing contenttttttt
  </div>


  <div class="test-item-2"></div>

</div>

CSS:

.test-container {
  width: 1000px;
  height: 500px;
  margin: auto;
  background: black;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
}

.test-item-overflow {
  width: fit-content;
  height: 55px;
  background: red;
  border: 1px solid yellow;
}

.test-item-2 {
  width: 100%;
  height: 55px;
  background: blue;
  border: 1px solid green;
}

I want the 'test-item-2' (the one with the blue background) div to match the red one in width, but, keep in mind that the content on the redbox might not be exactly the same everytime, so no calc(100% + x) with fixed params...

Answer 1

Better to use display:grid; on .test-container. After if you dont want to have gap between to the 2 cells, this is due to .test-container { height: 500px; }.

DEMO:

html body {
  width: 100vw;
  height: 100vh;
  margin: 0px;
  overflow: auto;
  display: flex;
  align-items: center;
  background: grey;
}

.test-container {
  width: 1000px;
  height: 500px;
  margin: auto;
  background: black;
  /*display: flex;
  flex-direction: column;*/
  display:grid;
  overflow-x: auto;
}

.test-item-overflow {
  width: 1500px;
  height: 55px;
  background: red;
  border: 1px solid yellow;
}

.test-item-2 {
  width: 100%;
  height: 55px;
  background: blue;
  border: 1px solid green;
}

<div class="test-container">
  
  <div class="test-item-overflow">
   overflowing contenttttttt
  </div>
  
  
  <div class="test-item-2"></div>

</div>

Answer 2

As you have set the width: fit-content; for the overflow div, it makes the width uncontrollable as it grows with more content in that div. one solution might be to change the width: 100%; and add overflow-x: scroll to the class .test-item-overflow. (see the change in the below snippet)

However, if you want to keep the width: fit-content; for the red div and change the blue div's width along with the red one (depending on the content) you can add: document.getElementsByClassName("test-item-2").style.width = document.getElementsByClassName("test-item-overflow").offsetWidth + "px". (in this case it's better to define id for the divs and use getElementById in the js code)

.test-container {
  width: 1000px;
  height: 500px;
  margin: auto;
  background: black;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
}

.test-item-overflow {
  width: 100%;
  overflow-x: scroll;
  height: 55px;
  background: red;
  border: 1px solid yellow;
}

.test-item-2 {
  width: 100%;
  height: 55px;
  background: blue;
  border: 1px solid green;
}

<div class="test-container">

  <div class="test-item-overflow">
    aaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
  </div>


  <div class="test-item-2"></div>

</div>

Answer 3

So I really recommend you go ahead and add the following lines

Margin:0px;

This will take away all the space between your content and browser

Padding:0px;

This will take away all the space between your content and content border

Overflow:hidden;

Finally this should remove overflown content.

Hope that helped!