Почему этот блок выходит за границы родительского?

Question

KarakulovWebDev @KarakulovWebDev

HTML
CSS

Почему этот блок выходит за границы родительского?

пример тут
подскажите как поправить?

upd: на всякий случай уточню:
нужно чтоб cb-table растянулся на все доступное место (сейчас больше) а cb-filter фиксированный размер в px

<div class="organizations__container">
  <div class="organizations__content">
    <div class="cb-table">
      <div>
        контент|
      </div>
       <div>
        контент|
      </div>
       <div>
       контент|
      </div>
       <div>
       контент|
      </div>
    </div>
  </div>
  <div class="cb-filter"></div>
</div>

.organizations__container {
    max-width: 100px;
    display: flex;
    background: gray;
}
.organizations__content {
  display: flex;
  background: red;
}
.cb-table {
  display: flex;
  overflow-x: scroll;
}
.cb-filter {
    background: blue;
    min-width: 26px;
}

Вопрос задан более года назад
116 просмотров

4 комментария

Подписаться 1 Простой 4 комментария

Ankhena @Ankhena Куратор тега CSS

Ограничить ширину внутренних.
Через calc или гридами или как вам удобнее.

Написано более года назад
Ankhena @Ankhena Куратор тега CSS

И jsfiddle работает в России только с VPN, так что если хотите увеличить количество желающих вам помочь, переходите на codepen.io или нормально открывающиеся аналоги.

Написано более года назад

skitroman @skitroman

<style>
    *{ /* убираем отступы */
      margin:0px;
      padding:0px;
      box-sizing: border-box;
    }
    .organizations__container {
      max-width: 100vw; /* задаем главному контейнеру размер ширины экрана*/
      display: flex;
      background: gray;
    }

    .organizations__content {
      width:100%; /* устанавливаем 100% ширину родительского элемента */
      display: flex;
      background: red;
    }

    .cb-table {
      width:100%; /* устанавливаем 100% ширину родительского элемента */
      display: flex;
      overflow-x: scroll;
    }

    .cb-filter {
      background: blue;
      min-width: 26px;
    }
  </style>
</head>
<body>
  <div class="organizations__container">
    <div class="organizations__content">
      <div class="cb-table">
        <div>
          контент|
        </div>
        <div>
          контент|
        </div>
        <div>
          контент|
        </div>
        <div>
          контент|
        </div>
      </div>
    </div>
    <div class="cb-filter"></div>
  </div>
</body>

Написано более года назад

skitroman @skitroman

Выполняйте код последовательно, задавайте ширину по очереди элементам

Написано более года назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- вчера
- 137 просмотров
2

ответа
PHP

+1 ещё

Простой
Как исправить "Undefined array key «login»,"password" в $_POST?
- 1 подписчик
- вчера
- 96 просмотров
1

ответ
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- вчера
- 98 просмотров
2

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- вчера
- 96 просмотров
0

ответов
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- 22 нояб.
- 73 просмотра
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- 22 нояб.
- 55 просмотров
1

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- 22 нояб.
- 62 просмотра
1

ответ
CSS

Простой
Можно ли в CSS сгладить углы при использовании border-radius?
- 1 подписчик
- 22 нояб.
- 100 просмотров
1

ответ
CSS

+2 ещё

Простой
Как корректно настроить Gulp + Sass?
- 1 подписчик
- 21 нояб.
- 83 просмотра
2

ответа
HTML

Простой
Почему некорректно отражается текстареа в Osclass evolution?
- 1 подписчик
- 21 нояб.
- 36 просмотров
0

ответов
Показать ещё Загружается…

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

WordPress-разработчик

div. • Ставрополь

от 50 000 до 120 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Аудит и поддержка проекта внедрению виртуальной архитектуры (АСУ ТП)

25 нояб. 2024, в 03:04

500000 руб./за проект

Сделать простой лендинг

25 нояб. 2024, в 02:45

2000 руб./за проект

Изображения на главную страницу в стиле Jetton и 1вин

25 нояб. 2024, в 00:22

12000 руб./за проект

Ограничить ширину внутренних.
Через calc или гридами или как вам удобнее.
И jsfiddle работает в России только с VPN, так что если хотите увеличить количество желающих вам помочь, переходите на codepen.io или нормально открывающиеся аналоги.
<style> *{ /* убираем отступы */ margin:0px; padding:0px; box-sizing: border-box; } .organizations__container { max-width: 100vw; /* задаем главному контейнеру размер ширины экрана*/ display: flex; background: gray; } .organizations__content { width:100%; /* устанавливаем 100% ширину родительского элемента */ display: flex; background: red; } .cb-table { width:100%; /* устанавливаем 100% ширину родительского элемента */ display: flex; overflow-x: scroll; } .cb-filter { background: blue; min-width: 26px; } </style> </head> <body> <div class="organizations__container"> <div class="organizations__content"> <div class="cb-table"> <div> контент| </div> <div> контент| </div> <div> контент| </div> <div> контент| </div> </div> </div> <div class="cb-filter"></div> </div> </body>
Выполняйте код последовательно, задавайте ширину по очереди элементам

Почему этот блок выходит за границы родительского?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт