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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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