Дочерний элемент CSS не наследует родительскую высоту [дубликат]

Вы можете отправить его как строку, почему бы и нет. Но вы, вероятно, пропустили JSON здесь немного, поскольку, насколько я понимаю, дело в том, чтобы отправить только нужные данные и нанести их на HTML на клиенте.

0
задан mr.boris 18 January 2019 в 10:24
поделиться

2 ответа

Удалить max-height: 80%; из .parent

0
ответ дан Martynas Martin 18 January 2019 в 10:24
поделиться

удалить max-height родителя. спасибо

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.parent {
  min-width: 200px;
  max-width: 300px;
  min-height: 200px;
  background-color: red;
  box-sizing: border-box;
  padding: 20px;
  /* overflow-y: auto; */ /* works! */
}
.child {
  width: 100%;
  height: 100%; /* assumes parents height */
  background-color: blue;
  color: white;
  padding: 10px;
  box-sizing: border-box;
  overflow-y: hidden; /* doesn't work! */
}
<div class="wrapper">
  <div class="parent">
    <div class="child">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
    </div>
  </div>
</div>

0
ответ дан Xenio Gracias 18 January 2019 в 10:24
поделиться