Почему блок шире содержимого?

Question

[Егор Астрейко]

Всем привет, почему блок шире чем его содержимое ?

код блока:

.inf {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    align-items: flex-end;
    width: 50%;
    margin-right: 30px;

    &__title {
      display: -webkit-flex;
      display: -ms-flex;
      display: flex;
      width: auto;
      flex-wrap: wrap;
      overflow: hidden;
      font-size: rem(16);
      color: #666;
      margin-right: 2px;
    }

    &__dotted {
      border-bottom: 2px dotted #ccc;
      margin-right: 2px;
      flex-grow: 2;
      top: -3px;
    }

    &__text {
      font-size: rem(18);
      color: #000;
      text-align: left;

      span {
        font-size: rem(14);
        color: #999;
      }
    }
    &:nth-child(2n) {
      margin-right: 0;
    }
  }

блок с классом "&__dotted" по идеи должен быть между "&__title" и "&__text", но из-за того что "&__title" занял больше чем ему нужно, блока с классом "&__dotted" не видно.

Answer 1

[Stalker_RED]

А почему бы и нет?
Разве вы где-то указали, что он должен равняться содержимому, или что содержимое должно подстроиться под его ширину?

Не совсем понятно кто из них inf, кто text и так далее. Разметка не помешала бы. В идеале - сразу ссылка на песочницу, коли уж вы не умеете в "минимальный пример".

Answer 2

[leni_m]

без разметки трудно понять, как у вас блоки расположены. Вложены или рядом друг сдругом, но мб проблема из за свойства
overflow: hidden;
т.к. оно задает размеры блоку, исходя из размеров дочерних элементов

Comments

[Егор Астрейко]

<div class="inf">
<div class="inf__title"></div>
<div class="inf__dotted"></div>
<a href="#" class="inf__text"></a>
</div>

[leni_m]

Егор Астрейко, тода хз, лучше в браузере через панель разработчика посмотреть, мб какие стили еще наследуются от родителей, там это видно.

[Егор Астрейко]

leni_m, В том-то и дело, что тоже сначала подумал про наследование и перекрытие стилей, но нет (

[Егор Астрейко]

leni_m, https://codepen.io/AstreikoEgor/pen/gzMvww?editors=0100
Видно если код находится слева или справа

[leni_m]

Егор Астрейко, ну вот тут он у вас не шире)

[leni_m]

Егор Астрейко, если точкам задать ширину то все норм, мб это поведение флекса я хз с ним вообще не работал

[Егор Астрейко]

leni_m, на скрине видно что рамка больше чем содержимое ( А как можно по другому сделать, что бы точки занимали все свободное пространство ?

[leni_m]

Егор Астрейко, задать ширину левому и правому блоку

[Егор Астрейко]

leni_m, ширина левого и правого блока должна быть динамическая, а все свободное место забирал блок по середине с точками

[leni_m]

Егор Астрейко, да мне что пойти изучать флекс? я же написал, что не работал с ним.

[Егор Астрейко]

leni_m, я интересуюсь, как можно без флексов