元素在不同的缩放级别分离

Question

＆＃13;

＆＃13;

.order-page {
  margin-top: 20px;
  justify-content: space-between;
  display: flex;
}
.order-page .order-page-left {
  width: 275px;
  background: white;
}
.order-page .order-page-right {
  width: 710px;
}
.order-page .order-page-content {
  padding: 20px 35px 45px 40px;
}
.color-box {
  background: red;
}
.orders-list .item {
  display: block;
  border-bottom: 1px solid #e0e0e0;
  color: black;
  outline: 0;
  position: relative;
  overflow: hidden;
}
.orders-list .item .inner {
  padding: 7px 0 10px;
  overflow: hidden;
}
.orders-list .item .detail {
  float: left;
  padding: 0 0 0 15px;
  width: 50px;
}
a {
  text-decoration: none;
}
.orders-list .item .detail .smaller {
  font-size: 12px;
  color: black;
}
.orders-list .item .name {
  margin-left: 65px;
}
.orders-list .item .name .info {
  font-size: 12px;
  color: black;
}
.orders-list .item.active {
  background: blue;
  overflow: visible;
}

＆＃13;

<div class="order-page">
  <div class="order-page-left">
    <div class="orders-list">
      <a href="#" class="item active">
        <div class="inner cfx">
          <div id="documentDetail0" class="detail">
            <span class="showDate">
              <span class="docDate" style="display: inline;">17.06
                                            </span>
            </span>
          </div>
          <div id="documentName0" class="name">

            TEST1
            <div id="documentInfo0" class="info">

              TEST COMPANY - Branch I
              <br>52.50 € s87dff634769832
              <br>

            </div>
          </div>
        </div>
      </a>
    </div>
  </div>
  <div class="order-page-right color-box">
    <div class="order-page-content" style="display: block;">
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

如果用户在任何浏览器中缩小红色和蓝色元素彼此分开。我想以某种方式防止这种情况发生，但我不知道如何，我是CSS的新手并且没有经验。这里还有fiddle链接。如果有人可以提出建议将会非常有帮助。

Answer 1

这些方框的宽度是固定的，具体取决于你的目标是什么，你可能想要使用花车或相对宽度，如25％，75％。

这对我有用，在FF 40中使用“Inspect Element”功能进行测试。

.order-page .order-page-right {
	//float right;
	width:100%;
}