Можно ли использовать относительное позиционирование во флексбоксах?

Question

Изображение, показывающее обзор проблемы

Я делаю модульное расположение строк / столбцов с переменными комбинациями строк в столбцах в строках и т. Д. Я использую flex свойство, чтобы эти элементы хорошо помещались на странице.

CSS:

.row {
    display: flex;
}
.column {
    display: flex;
    flex-direction: column;
    flex: 1;
}

Вот скрипка, показывающая эффект, который я собираюсь получить для .Обратите внимание, что размеры столбцов пропорциональны их содержанию.

Однако я также использую элементы canvas , и для создания нескольких слоев чертежа я их складываю так:

CSS:

.canvasarea {
    position: relative;
}
.canvasarea canvas {
    position: absolute;
}

Вот скрипка, показывающая этот эффект .

Однако, когда я пытаюсь объединить эти эффекты, я получаю это неожиданноерезультат (скрипка) .Теперь он устанавливает ширину столбца равной 50% экрана независимо от дочерних элементов.

Я пробовал каждый вариант flex и position , который я мог найти, но могуКажется, не соединить эти два эффекта.Возможно ли это сделать так, или я нарушаю flex , используя относительный ?Буду признателен за любые советы, я все еще новичок в CSS.

Answer 1

Я обнаружил, что установка min-width на ширину самого широкого элемента (в данном случае мой холст) достигла желаемого эффекта .

HTML:

<div class="row">
  <span>Some text</span>
</div>
<div class="row">
  <div class="column">
    <div class="row">
      <div style="min-width:300px" class ="canvasarea">
        <canvas id="cvs1back"></canvas>
        <canvas id="cvs1front"></canvas>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="row">
      <span>Some other text</span>
    </div>
    <div class="row">
      <div style="min-width:100px" class ="canvasarea">
        <canvas id="cvs2back"></canvas>
        <canvas id="cvs2front"></canvas>
      </div>
    </div>
  </div>
</div>

CSS:

.row {
    display: flex;
    flex-direction: row;
}
.column {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.canvasarea {
  position: relative;
}
.canvasarea canvas {
  position: absolute;
}

JS:

var canvas1size = 300;
var canvas1b = document.getElementById("cvs1back");
canvas1b.height = canvas1size;
canvas1b.width = canvas1size;
var ctx1b = canvas1b.getContext("2d");
ctx1b.fillStyle = "red";
ctx1b.fillRect(0, 0, canvas1b.width, canvas1b.height);

var canvas1f = document.getElementById("cvs1front");
canvas1f.height = canvas1size;
canvas1f.width = canvas1size;
var ctx1f = canvas1f.getContext("2d");
ctx1f.beginPath();
ctx1f.strokeStyle = "black";
ctx1f.moveTo(canvas1size,0);
ctx1f.lineTo(0,canvas1size);
ctx1f.stroke();

canvas2size = 100;
var canvas2b = document.getElementById("cvs2back");
canvas2b.height = canvas2size;
canvas2b.width = canvas2size;
var ctx2b = canvas2b.getContext("2d");
ctx2b.fillStyle = "gray";
ctx2b.fillRect(0, 0, canvas2b.width, canvas2b.height);

var canvas2f = document.getElementById("cvs2front");
canvas2f.height = canvas2size;
canvas2f.width = canvas2size;
var ctx2f = canvas2f.getContext("2d");
ctx2f.beginPath();
ctx2f.strokeStyle = "black";
ctx2f.moveTo(0,0);
ctx2f.lineTo(canvas2size,canvas2size);
ctx2f.stroke();

Рабочая скрипка

Answer 2

Установите flex: 1 в .canvasarea, чтобы вместить пространство, доступное в гибком контейнере, и max-width: 100% в элементе canvas, чтобы предотвратить переполнение:

var canvas1b = document.getElementById("cvs1back");
canvas1b.height = 400;
canvas1b.width = 400;
var ctx1b = canvas1b.getContext("2d");
ctx1b.fillStyle = "red";
ctx1b.fillRect(0, 0, canvas1b.width, canvas1b.height);

var canvas1f = document.getElementById("cvs1front");
canvas1f.height = 400;
canvas1f.width = 400;
var ctx1f = canvas1f.getContext("2d");
ctx1f.beginPath();
ctx1f.moveTo(0, 0);
ctx1f.lineTo(0, 0);
ctx1f.stroke();

var canvas2b = document.getElementById("cvs2back");
canvas2b.height = 400;
canvas2b.width = 400;
var ctx2b = canvas2b.getContext("2d");
ctx2b.fillStyle = "blue";
ctx2b.fillRect(0, 0, canvas2b.width, canvas2b.height);

var canvas2f = document.getElementById("cvs2front");
canvas2f.height = 400;
canvas2f.width = 400;
var ctx2f = canvas2f.getContext("2d");

.row {
  display: flex;
}

.column {
  flex: 1;
}

.canvasarea {
  position: relative;
  flex: 1;
}

.canvasarea canvas {
  position: absolute;
  max-width: 100%;
}

span {
  background: yellow;
}

<div class="row">
  <span>Some text</span>
</div>
<div class="row">
  <div class="column">
    <div class="canvasarea">
      <canvas id="cvs1back"></canvas>
      <canvas id="cvs1front"></canvas>
    </div>
  </div>
  <div class="column">
    <div class="row">
      <span>Some other text</span>
    </div>
    <div class="row">
      <div class="canvasarea">
        <canvas id="cvs2back"></canvas>
        <canvas id="cvs2front"></canvas>
      </div>
    </div>
  </div>
</div>