Powiedzmy, że mam rodzica <div> ze stałą wysokością i elementami podrzędnymi elementu elastycznego.

Czy istnieje sposób, aby wysokość elementów podrzędnych nie była stała, ale rozszerzała się w zależności od zawartości ?

.main-container {
  height: 250px;
  background-color: green;
  display: flex;
  flex: 0 1 auto;
  overflow: auto;
}
.div1 {
  width: 100%;
  height: 100%;
  background-color: lightcoral;
}
.div2 {
  width: 100%;
  background-color: lightgrey;
}
.div3 {
  width: 100%;
  background-color: lightpink;
}
div p {
  font-size: 10em;
}
<div class="main-container">
  <div class="div1">
    <p>a</p>
  </div>
  <div class="div2">q</div>
  <div class="div3">s</div>
</div>

Oczekiwany wynik: tutaj wprowadź opis obrazu

1
Logan Wlv 12 marzec 2020, 01:44

2 odpowiedzi

Najlepsza odpowiedź

Nie musisz używać fit-content (które nie jest obsługiwane w przeglądarce Firefox: https : //caniuse.com/#feat=mdn-css_properties_height_fit-content), wystarczy wyłączyć efekt stertch, dodając align-self:flex-start; do potrzebnego elementu

.main-container {
  height: 250px;
  background-color: green;
  display: flex;
  flex: 0 1 auto;
  overflow: auto;
}
.div1 {
  width: 100%;
  align-self:flex-start;
  background-color: lightcoral;
}
.div2 {
  width: 100%;
  background-color: lightgrey;
}
.div3 {
  width: 100%;
  background-color: lightpink;
}
div p {
  font-size: 10em;
}
<div class="main-container">
  <div class="div1">
    <p>a</p>
  </div>
  <div class="div2">q</div>
  <div class="div3">s</div>
</div>
2
Temani Afif 12 marzec 2020, 12:34

Czy istnieje sposób, aby jego wysokość podrzędna nie była stała, ale rozszerzała się w zależności od ich zawartości?

Jeśli chcesz, aby element DIV był tak wysoki, jak wymaga tego zawartość, możesz zastosować height: fit-content; do tego elementu div.

Przykład w poniższym fragmencie (dla lewej kolumny):

.main-container {
  height: 250px;
  background-color: green;
  display: flex;
  flex: 0 1 auto;
  overflow: auto;
}
.div1 {
  width: 100%;
  height: fit-content;
  background-color: lightcoral;
}
.div2 {
  width: 100%;
  background-color: lightgrey;
}
.div3 {
  width: 100%;
  background-color: lightpink;
}
div p {
  font-size: 10em;
}
<div class="main-container">
  <div class="div1">
    <p>a</p>
  </div>
  <div class="div2">q</div>
  <div class="div3">s</div>
</div>
1
Anis R. 11 marzec 2020, 23:28