Question

This JSFiddle是我代码的粗略表示。我已经包含了我认为可能影响问题的所有CSS样式。其中一些是我的响应式设计所必需的，因此我需要找出导致问题的样式，以便找到解决方法。

如您所见，我的.text div（绿色）位于其容器article（黄色）的边界之外。在我的实际项目中，这导致文本被切断。在我的JS示例中，它只是将.text扩展到其容器的边缘，main

布局使用flexbox。基本的想法是.image和.text都是50％宽度，所以它们彼此相邻，.text左边有24px边距，所以那里他们之间是一个很好的差距。

为什么.text位于其边界容器之外？

article {
  display: flex;
  width: 100%;
  margin-left: 24px;

  > * {
    flex 0 0 50%;
  }
}

.image {
  flex: 1 0;
  img {
    max-width: 100%;
  }
}

.text {
  flex: 1 0;
  margin-left: 24px;
  width: calc(50% - 24px);
}

Answer 1

您可以尝试以下代码：

article {
  display: flex;
  width: calc(100% - 24px);
  margin-left: 24px;
  background-color: yellow;
 }

您可以在此fiddle中看到它正常工作。

Answer 2

article {
  display: flex;
  /* width: 100%; remove this line */
  margin-left: 24px; 
  background-color: yellow;
 }

盒子的宽度是父母的100％，同时还有一个边缘是造成溢出的原因。试试吧！

Answer 3

Francesca您可以将width元素的article更改为：

  width: calc(100% - 24px);

这意味着100％的屏幕减去您想要的保证金。将其设为100％会导致其实际width为100% + 24px，因此会将其剪切为适合屏幕的width。

检查更新的jsFiddle here。

div位于flex容器外，导致文本截止

3 个答案: