Сопоставить неопределенную высоту img с другим соседним div? - PullRequest
Новая
       25

Сопоставить неопределенную высоту img с другим соседним div?

0 голосов
/ 05 октября 2019

Это JSX рассматриваемого компонента: 

import React from 'react'
import * as classes from './PhotoCard.module.scss'

const PhotoCard = ({ img, name, username, profileImg, style }) => 
  <div className={classes.PhotoCardWrapper} style={style}>
    <div className={classes.ImgWrapper}>
      {img}
    </div>
    <div className={classes.Sidebar}>
      <div className={classes.Creator}>
        <div className={classes.ProfilePicture}>
          {profileImg}
        </div>
        <div className={classes.ProfileInfo}>
          <h5>{name}</h5>
          <p>{username}</p>
        </div>
      </div>
      <div className={classes.Comments}>
        <input type="text" name="comment" id="comment" placeholder="Write a comment" />
      </div>
    </div>
  </div>

export default PhotoCard

Вот соответствующий SCSS: 

.PhotoCardWrapper {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  border-radius: 5px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.16), 0 2px 6px rgba(0,0,0,0.2);

  .ImgWrapper {
    display: flex;
    width: 100%;

    img {
      width: 100%;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
    }
  }

  .Sidebar {
    width: 300px;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;

    .Creator {
      width: 100%;
      display: flex;
      padding: 10px;
      overflow: hidden;
      overflow-x: auto;
      box-sizing: border-box;

      .ProfilePicture {
        width: 40px;
        height: 40px;
        border-radius: 40px;
        background-image: url('../../static/defaults/placeholder.png');
        background-size: contain;
        cursor: pointer;
        margin-right: 10px;
        flex-shrink: 0;

        img {
          width: 100%;
          height: 100%;
          border-radius: 40px;
        }
      }

      .ProfileInfo {
        height: 40px;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
      }

      h5 {
        font-weight: 500;
        letter-spacing: 0.5px;
      }

      p {
        font-size: 0.7em;
        color: $color-2;
      }
    }

    .Comments {
      width: 100%;
      display: flex;
      flex-flow: column nowrap;
      flex-grow: 1;
      background: #525252;

      input {
        border: none;
        border-top: 1px solid $color-1;
        font-size: 0.9em;
        padding: 5px;
      }
    }
  }
}

Чтобы объяснить, я пытаюсь сохранить соотношение сторонизображение на левой стороне компонента. Я могу использовать абсолютную единицу для ширины, однако я не могу использовать абсолютную единицу высоты, так как высота компонента будет основана на соотношении сторон изображения.

«Боковая панель», использующая flexbox, должна соответствовать высоте любой неопределенной высоты изображения. Я не могу найти решение для этого. Как вы можете видеть, я пытаюсь использовать flex-grow в div для комментариев, который не будет работать без указания высоты в родительских элементах.

...