0

есть 2 блока в левом текст с картинками, а в правом еще один блок со скролом и картинками:

#main{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
#main .item .side {
  display: inline-flex;
  align-items: center;
  background: url(images/dot-bg.png) #eaac9d;
  margin-right: 10px;
}

#main .item .other-side {
  display: inline-flex;
  align-items: center;
}

.scroll {
  height: auto;
  position: absolute;
  overflow-x: hidden;
  overflow-y: scroll;
  top: 80px;
  bottom: 0;
  justify-content: center;
}
<div id="main" style="align-items: flex-start; ">
<div class="column" style="height: 100%; width: calc(50% - 10px); border-right: 2px solid #eaac9d;">
  <div class="item" style="display: flex; width: auto;">
    <div class="side">
      <img src="images/legs.jpg" style="  width: 150px;">
    </div>
    <div class="other-side">
      <div class="inner">
        <h2>Hi Welcome to the World.</h2>
        Here<strike>we are</strike> I am working hard to make good things for you.<strike>Newest</strike> Select creations are on this page. But you are encouraged to explore deeper. Please enjoy your stay.🌻
      </div>
    </div>
  </div>
</div>
<div class="column" style="width: calc(50% - 10px); border-left: 2px solid #eaac9d;    ">
  <div class="scroll" style="display: flex; width: auto;">
    <ul>
      <li>
        <img src="images/Group 2.png" style="width: 100%;">
      </li>
      <li>
        <img src="images/Group 1.png" style="width: 100%;">
      </li>
      <li>
        <img src="images/Group 1blue.png" style="width: 100%;">
      </li>
      <li>
        <img src="images/budenist`.png" style="width: 100%;">
      </li>
    </ul>
  </div>
</div>
</div>

можно ли сделать так, чтобы при добавлении информации в левый блок, высота правого блока зависела от высоты левого блока

1 ответ 1

0

Почитайте про свойство flex-grow https://css-tricks.com/snippets/css/a-guide-to-flexbox/ && https://developer.mozilla.org/ru/docs/Web/CSS/flex-grow

А также пример: https://codesandbox.io/s/sleepy-galileo-h0cmb?fontsize=14&hidenavigation=1&theme=dark

1
  • спасибо за ответ
    – frayer
    14 авг 2020 в 16:39

Ваш ответ

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

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