<!DOCTYPE html>
<!--
 | When values are over-constrained:
 | If the 'direction' property of the containing block has the value 'ltr',
 | the specified value of 'margin-right' is ignored and the value is calculated
 | so as to make the equality true. If the value of 'direction' is 'rtl', this
 | happens to 'margin-left' instead.
 |   https://www.w3.org/TR/CSS21/visudet.html#blockwidth
 -->
<html>
<head>
  <style>
    .containing-block {
      background-color: #000000;
      width: 300px;
      height: 90px;
      margin: 5px;
    }
    .red {
      width: 50px;
      height: 30px;
      background-color: #800000;
    }
    .green {
      width: 50px;
      height: 30px;
      background-color: #008000;
    }
    .blue {
      width: 50px;
      height: 30px;
      background-color: #000080;
    }
  </style>
</head>
<body>
  <div class="containing-block">
    <div class="red" dir="rtl"></div>
    <div class="green" dir="ltr"></div>
    <div class="blue"></div>
  </div>
  <div class="containing-block" dir="ltr">
    <div class="red" dir="rtl"></div>
    <div class="green" dir="ltr"></div>
    <div class="blue"></div>
  </div>
  <div class="containing-block" dir="rtl">
    <div class="red" dir="rtl"></div>
    <div class="green" dir="ltr"></div>
    <div class="blue"></div>
  </div>
</body>
</html>