CODEWITHSUNDEEP
htmlcss
al3x1s
al3x1s

Reputation: 70

Make parent height fit to the content height (CSS)

Can someone help me to understand how can I make the height (red border) fit to the content (green border)?

enter image description here

I am having trouble understanding which property to use, I am trying to get this result but I have not been successful

enter image description here

div.items {
  position: fixed;
  top: 7.4cm;
  left: 1cm;
  width: 19.6cm;
  height: 4.5cm;
  border: 1px solid black;
}

div.item {
  border: 1px solid red;
  height: 19px;
}

div.cantidades {
  position: absolute;
  left: 0.1cm;
  width: 1.6cm;
}

div.descripcion {
  position: absolute;
  left: 1.9cm;
  width: 10.5cm;
}

div.precioUnitario {
  position: absolute;
  left: 12.4cm;
  width: 1.5cm;
}

div.ventas {
  position: absolute;
  left: 17.4cm;
  width: 2.2cm;
}

div.green {
  border: 1px solid green;
}
<div class="items">
  <div class="item">
    <div class="cantidades">2</div>
    <div class="descripcion">TM. MAIZ AMARILLO DE MUELLE DE CEPA HACIA BODEGAS DE ALMAPAC</div>
    <div class="precioUnitario">$1.60</div>
    <div class="ventas">$60</div>
  </div>
  <div class="item">
    <div class="cantidades">2</div>
    <div class="descripcion">TM. MAIZ blanco</div>
    <div class="precioUnitario">$1.90</div>
    <div class="ventas">$6</div>
  </div>
</div>

Upvotes: 0

Views: 91

Answers (1)

Manjuboyz
Manjuboyz

Reputation: 7066

If you're looking for responsive layout then use flex always, I have also removed few unnecessary code from yours, because those are contradicting your requirement.

div.items {
  top: 3.4cm;
  left: 1cm;
  width: 19.6cm;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

div.item {
  border: 0px solid red;
  display: flex;
  border: 1px solid blue;
}

div.cantidades {
  left: 0.1cm;
  width: 1.6cm;
  border: 1px solid green;
}

div.descripcion {
  left: 1.9cm;
  width: 10.5cm;
  border: 1px solid green;
}

div.precioUnitario {
  left: 12.4cm;
  width: 1.5cm;
  border: 1px solid green;
}

div.ventas {
  border: 1px solid green;
  left: 17.4cm;
  width: 2.4cm;
  position: absolute;
}
<html>

<head>
  <title>Print Test</title>
</head>

<body>
  <div class="items">
    <div class="item">
      <div class="cantidades">2</div>
      <div class="descripcion">TM. MAIZ AMARILLO DE MUELLE DE CEPA HACIA BODEGAS DE ALMAPAC TM. MAIZ AMARILLO DE MUELLE DE CEPA HACIA BODEGAS DE ALMAPAC</div>
      <div class="precioUnitario">$1.60</div>
      <div class="ventas">$60</div>
    </div>

    <div class="item">
      <div class="cantidades">2</div>
      <div class="descripcion">TM. MAIZ blanco</div>
      <div class="precioUnitario">$1.90</div>
      <div class="ventas">$6</div>
    </div>
  </div>
</body>

</html>

Upvotes: 3

Related Questions