Saya memiliki wadah flexbox (div) dengan dua div di dalamnya: satu berisi teks, yang lain berisi kanvas. Ketika saya mengurangi lebar flexbox, div pertama menyusut tetapi div kedua tidak.

.flex-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: grey;
}

.textdiv {
  background-color: #f1f1f1;
  margin: 10px;
  line-height: 75px;
  font-size: 30px;
}

.canvasDiv {
  background-color: DodgerBlue;
}
<html>

<head></head>

<body>

  <div class="flex-container">
    <div class="textdiv">1111111111 123123123121</div>
    <div class="canvasDiv">
      <canvas id="canvas"></canvas>
    </div>
  </div>

</body>

</html>

JSFiddle

PERBARUI: Saya ingin memiliki Bagan (Chart.js) di dalam kanvas saya (yang menyusut ketika saya mengurangi lebar flexbox) - seharusnya terlihat seperti:

masukkan deskripsi gambar di sini html css flexbox

1
bairog 19 November 2020, 16:37

1 menjawab

Jawaban Terbaik

Itu karena kanvas memiliki Width:auto sebagai nilai Default, Browser menghitung lebar kanvas, untuk mengatasi ini Anda perlu mengatur lebar atau lebar maksimal 100% dari induknya.

0
Boudy hesham 19 November 2020, 13:53