Как работают функции min() и max() в пределах одного родителя

Question

Интересует формула, которая рассчитывает какой блок сколько место должен занять внутри родителя, если ширина родительского блока меньше, чем задаём ширину дочерним блокам.

Почему блок MAIN приобрёл ширину равную в 423px, а блок ASIDE имеет ширину 375px. Если родительскому классу убавить 100px, то ширина MAIN уже 393px, а ширина ASIDE 305px. Как можно самому считать сколько будет ширина у блоков?

   

 /* Ширина parent 800px */
    * {
      box-sizing: border-box;
    }

    body {
      width: 1000px;
      border: 1px solid red;
      height: 600px;
      padding: 50px;
    }

    .parent {
      width: 800px;
      margin: 0 auto;
      border: 1px solid green;
      height: 100%;
      display: flex;
      align-items: start;
    }

    .aside-block {
      width: min(50%, 450px);
      border: 1px solid blue;
    }

    .main-block {
      width: max(50%, 450px);
      border: 1px solid black;
    }

    <div class="parent">
      <div class="aside-block">ASIDE</div> 
      <div class="main-block">MAIN</div> 
     <div>

   

 /* Ширина parent 700px */
    * {
      box-sizing: border-box;
    }

    body {
      width: 1000px;
      border: 1px solid red;
      height: 600px;
      padding: 50px;
    }

    .parent {
      width: 700px;
      margin: 0 auto;
      border: 1px solid green;
      height: 100%;
      display: flex;
      align-items: start;
    }

    .aside-block {
      width: min(50%, 450px);
      border: 1px solid blue;
    }

    .main-block {
      width: max(50%, 450px);
      border: 1px solid black;
    }

    <div class="parent">
      <div class="aside-block">ASIDE</div> 
      <div class="main-block">MAIN</div> 
     <div>

Answer 1

min и max работают ровно так как ожидается и в первом примере получаются 397px и 448px.

397px получается так:

ширина родителя 800px - 2px (заданный border и box-sizing: border-box)
50% от ширины родителя = 798px/2 = 399px
выбираем min(399px, 450px) → 399px
и снова минус 2px border = 397px.

448px аналогично:

выбираем max(399px, 450px) → 450px
минус 2px = 448px.

А дальше срабатываем магия flexbox. Посколько оба этих элемента никак не влезают в 798px, то они пропорционально уменьшаются что бы в сумме оказаться 798px (с учётом всех border).

Вычисляем коэффициент k = (798px - 4px (четыре border))/(448px + 397px) ≈ 0.9396

умножаем

397px * k ≈ 373px
448px * k ≈ 421px

P.S. Firefox умеет наглядно показывать эти размеры.

БЛОГ НА HUSL

Как работают функции min() и max() в пределах одного родителя

Ответы (1 шт):