1

Не пойму почему так работает. Блок вроде как должен сжиматься и он сжимается. Но как только появляется контент в блоке, то сайдбар улетает вниз.

Ниже пример если убрать текст в box__content, то работает нормально, если появляется текст то ломается.

.contain {
  max-width: 1000px;
  width: 100%;
  margin: 20px;
  background: #f5f5f7;
  margin: 0 auto;
}

.list {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
  padding: 20px;
  flex-wrap: wrap;
}
.list__content {
  -webkit-box-flex: 1;
          flex: 1 1 auto;
  background: #e7eaef;
}
.list__sidebar {
  -webkit-box-flex: 0;
          flex: 0 1 23.07692%;
  min-width: 200px;
  background: #ccc;
}
.list__row {
  -webkit-box-flex: 0;
          flex: 0 0 100%;
  background: #fff;
}

.box {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
  flex-wrap: wrap;
}
.box__item {
  -webkit-box-flex: 0;
          flex: 0 0 33.33333%;
}
<div class="contain">
  <div class="list">
    <div class="list__content">
      <div class="box">
        <div class="box__item">1
          <div class="box__content">gar r afa swfasdfas asfas da asdf s asd a dg sdfg </div>
        </div>
        <div class="box__item">2
          <div class="box__content">asdfas asda da sdgasdg asd asgasdf asdf  asg dh dg</div>
        </div>
        <div class="box__item">3
          <div class="box__content">as das asdgasd fsadf asd asfasd asdf asda agaga asd</div>
        </div>
        <div class="box__item">4</div>
        <div class="box__item">5</div>
        <div class="box__item">6</div>
      </div>
    </div>
    <div class="list__sidebar">sidebar</div>
    <div class="list__row">row</div>
  </div>
</div>

1
  • Вам нужно, что бы сайдбар был справа?
    – rabbit
    Commented 9 июл. 2020 в 13:02

2 ответа 2

2

Возможно я не совсем понял вашу задачу, но могу предложить в .list__content задать width: calc(100% - 200px); max-width: 76%; а в мобильной версии менять на 100%.

1
  • потестил, тоже работает как надо. list__content - должен быть резиновый, list__sidebar - тоже резиновый, но min-width у него 200px. если прописать width: calc(76.92308% - 200px), то в этом случае срабатывает. width: calc(100% - 200px), max-width: 76.92308% - в этом случае тоже срабатывает.
    – ink Shio
    Commented 10 июл. 2020 в 8:55
1

Вам так нужно было?

.contain {
  max-width: 1000px;
  width: 100%;
  margin: 20px;
  background: #f5f5f7;
  margin: 0 auto;
}

.list {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
  padding: 20px;
  flex-wrap: wrap;
}
.list__content {
  display: flex;
  -webkit-box-flex: 1;
          flex: 1 1 auto;
  background: #e7eaef;
}
.list__sidebar {
  -webkit-box-flex: 0;
          flex: 0 1 23.07692%;
  min-width: 200px;
  background: #ccc;
}
.list__row {
  -webkit-box-flex: 0;
          flex: 0 0 100%;
  background: #fff;
}

.box {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
  flex-wrap: wrap;
}
.box__item {
  -webkit-box-flex: 0;
          flex: 0 0 33.33333%;
}
<div class="contain">
  <div class="list">
    <div class="list__content">
      <div class="box">
        <div class="box__item">1
          <div class="box__content">gar r afa swfasdfas asfas da asdf s asd a dg sdfg </div>
        </div>
        <div class="box__item">2
          <div class="box__content">asdfas asda da sdgasdg asd asgasdf asdf  asg dh dg</div>
        </div>
        <div class="box__item">3
          <div class="box__content">as das asdgasd fsadf asd asfasd asdf asda agaga asd</div>
        </div>
        <div class="box__item">4</div>
        <div class="box__item">5</div>
        <div class="box__item">6</div>
      </div>
      <div class="list__sidebar">sidebar</div>
    </div>
    <div class="list__row">row</div>
  </div>
</div>

4
  • width: min-content; - да, это решает проблему. Других способов не видите? Поддержка у этого способа норм вроде caniuse.com, кроме проклятого ie ))) Мне нужна такая структура только из за того, что бы в моб версии менять sidebar и row блок местами.
    – ink Shio
    Commented 9 июл. 2020 в 13:41
  • да, ie всегда портит "малину". Если вам не принципиальна дефолтная html структура, то вот решение. ist__sidebar я поместил list__content, и list__content задал display: flex;
    – rabbit
    Commented 9 июл. 2020 в 14:11
  • Скорее принципиально, т.к. теперь не получится прописать order и поменять местами list__sidebar и list__row. Только js.
    – ink Shio
    Commented 9 июл. 2020 в 14:20
  • тогда воспользуйтесь ответом fortavey. Решение достаточно хорошее.
    – rabbit
    Commented 9 июл. 2020 в 14:30

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.