Сделайте дочерний элемент div шириной 100% контейнера с помощью overflow-x с помощью Flexbox

Question

Я пытаюсь сделать дочерний div контейнера Flexbox с содержимым overflowing-x 100% ширины с переполнением, но я не могу понять это, сделал несколько поисков и не смог найти решение;

Может ли кто-нибудь мне помочь?

Скрипка: 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;
}

Я хочу, чтобы div 'test-item-2' (с синим фоном) совпадал с красным по ширине, но имейте в виду, что содержимое на redbox может не совпадать каждый раз, поэтому не нужно вызывать c (100% + x) с фиксированными параметрами ...

Answer 1

Поскольку вы установили width: fit-content; для div переполнения, это делает ширину неуправляемой по мере роста с увеличением содержания в этом div. Одним из решений может быть изменение width: 100%; и добавление overflow-x: scroll в класс .test-item-overflow. (см. изменение в приведенном ниже фрагменте)

Однако, если вы хотите оставить width: fit-content; для красного div и изменить ширину синего div вместе с красной (в зависимости от содержимого), которую вы можете добавить : document.getElementsByClassName("test-item-2").style.width = document.getElementsByClassName("test-item-overflow").offsetWidth + "px". (в этом случае лучше определить id для divs и использовать getElementById в js коде)

.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 2

Так что я действительно рекомендую вам go вперед и добавить следующие строки

Margin:0px;

Это займет все пространство между вашим контентом и браузером

Padding:0px;

Это займет убрать все пространство между вашим контентом и границей контента

Overflow:hidden;

Наконец, это должно удалить переполненный контент.

Надеюсь, что помогло!

Answer 3

Вы можете сделать это, установив overflow-x: hidden для контейнера и overflow-x: scroll или auto для div переполнения (см. Полный просмотр страницы):

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

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

.test-item-overflow {
  width: 400px;
  overflow-x: auto; /* or 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>