为什么这里的外部<div>不能完全包围内部的<div>？

时间：2019-08-22 00:22:52

标签： html css

我在这里有一个jsfiddle：https://jsfiddle.net/Lh7qbye2/7/

还有一个测试网页：https://shetline.com/test/test01.html

问题是这样的：为什么在调整包含的大小时，内部<div>的内容不能防止外部<div>缩小到小于内部<div>的宽度缩小到狭窄的窗口？

sample image of inner div escaping outer div

  

根据我对问题的答案进行更新：

     

https://jsfiddle.net/Lh7qbye2/8/

     

https://shetline.com/test/test02.html

我可以使用以下方法解决Chrome或Safari的问题：

width: fit-content;

...在外部<div>上，但这不能解决Firefox或Edge的问题。此外，MDN将fit-content标记为experimental API：

  

这是实验性的API，不应在生产代码中使用。

外部word-break: break-all上的

<div>有点帮助，但弄乱了所有自动换行。如果我尝试通过在normal和<p>标签上设置<button>来补偿，则外部break-all提供的帮助将消失。

让我真正困惑的一件事是，我知道我看到过这样的情况，根本没有溢出问题，而且我不必全力以赴来获得我期望的行为。在这个简化的示例中，我缺少什么错了？

body {
  margin: 4em;
}

.demo {
  background-color: #BFC;
  box-sizing: border-box;
  margin: 0;
  padding: 1em;
  position: relative;
  /* width: fit-content; // With this it works for Chrome or Safari, but not for Firefox or Edge. */
  /* word-break: break-all; // For some reason this sort of helps too, but of course messes up all word wrapping. */
  /* If I try to apply "word-break: normal" to <p> and <button> tags to compensate, the inner <div> leaks out again. */
}

.demo p:first-child {
  margin-top: 0;
}

.other-stuff {
  align-items: center;
  background-color: #AEB;
  display: flex;
}

button {
  margin-right: 1em;
}

.square {
  display: inline-block;
  background-color: #699;
  height: 80px;
  margin-right: 1em;
  min-width: 80px;
  width: 80px;
}

.circle {
  border-radius: 50px;
  display: inline-block;
  background-color: #969;
  height: 100px;
  margin-right: 1em;
  min-width: 100px;
  width: 100px;
}
<div class="demo">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <div class="other-stuff">
    <button>One&nbsp;button</button>
    <div class="square"></div>
    <button>Another&nbsp;button</button>
    <div class="circle"></div>
    <button>Don't&nbsp;click!</button>
  </div>
</div>

2 个答案:

答案 0 :(得分：3)

您可以使用inline-block和min-width:100%的组合来完成所需的操作。块元素的宽度基于其父元素（包含块）定义，而inline-block的宽度由其内容定义。

添加min-width:100%将使其表现为块元素。在这种情况下这不是强制性的，因为您已经有很多内容，因此您一定要覆盖所有宽度：

body {
  margin: 4em;
}

.demo {
  background-color: #BFC;
  box-sizing: border-box;
  margin: 0;
  padding: 1em;
  position: relative;
  display:inline-block;
  min-width:100%;
}

.demo p:first-child {
  margin-top: 0;
}

.other-stuff {
  align-items: center;
  display: flex;
}

button {
  margin-right: 1em;
}

.square {
  display: inline-block;
  background-color: #699;
  height: 80px;
  margin-right: 1em;
  min-width: 80px;
  width: 80px;
}

.circle {
  border-radius: 50px;
  display: inline-block;
  background-color: #969;
  height: 100px;
  margin-right: 1em;
  min-width: 100px;
  width: 100px;
}
<div class="demo">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <div class="other-stuff">
    <button>One&nbsp;button</button>
    <div class="square"></div>
    <button>Another&nbsp;button</button>
    <div class="circle"></div>
    <button>Don't&nbsp;click!</button>
  </div>
</div>

缩小顶部的文本，min-width:100%将成为强制使用全宽度行为。

在整个页面上运行代码段 

body {
  margin: 4em;
}

.demo {
  background-color: #BFC;
  box-sizing: border-box;
  margin: 0;
  padding: 1em;
  position: relative;
  display:inline-block;
}

.demo p:first-child {
  margin-top: 0;
}

.other-stuff {
  align-items: center;
  display: flex;
}

button {
  margin-right: 1em;
}

.square {
  display: inline-block;
  background-color: #699;
  height: 80px;
  margin-right: 1em;
  min-width: 80px;
  width: 80px;
}

.circle {
  border-radius: 50px;
  display: inline-block;
  background-color: #969;
  height: 100px;
  margin-right: 1em;
  min-width: 100px;
  width: 100px;
}
<div class="demo">
  <p>Lorem ipsum </p>
  <div class="other-stuff">
    <button>One&nbsp;button</button>
    <div class="square"></div>
    <button>Another&nbsp;button</button>
    <div class="circle"></div>
    <button>Don't&nbsp;click!</button>
  </div>
</div>

<div class="demo" style="min-width:100%;">
  <p>Lorem ipsum </p>
  <div class="other-stuff">
    <button>One&nbsp;button</button>
    <div class="square"></div>
    <button>Another&nbsp;button</button>
    <div class="circle"></div>
    <button>Don't&nbsp;click!</button>
  </div>
</div>

来自the specification：

  

正常流程中的块级不可替换元素

     

其他属性的使用值中必须包含以下约束：

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

请注意内容如何在定义宽度中不起作用。

  

'Inline-block'，正常流程中未替换的元素

     

如果“宽度”为“自动”，则使用的值为收缩至适合宽度

     

缩小到适合的宽度的计算类似于使用自动表格布局算法来计算表格单元格的宽度。大致来说：通过格式化内容来计算首选宽度，而不用在没有出现明显换行符的地方换行，还可以计算首选最小宽度，例如，尝试所有可能的换行符。第三，找到可用宽度：在这种情况下，这是包含块的宽度减去所使用的'margin-left'，'border-left-width'，'padding-left'，'padding-right'， 'border-right-width'，'margin-right'以及任何相关滚动条的宽度

     

缩小到适合的宽度为：min(max(preferred minimum width, available width), preferred width)

请注意如何使用内容来定义宽度。

答案 1 :(得分：1)

您需要使用flex-wrap: wrap;将内容拆分到下一行。

这就是说，由于您为buttons使用了固定宽度，因此这是在较小屏幕上的最佳选择。

body {
  margin: 4em;
}

.demo {
  background-color: #BFC;
  box-sizing: border-box;
  margin: 0;
  padding: 1em;
  position: relative;
}

.demo p:first-child {
  margin-top: 0;
}

.other-stuff {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
}

button {
  margin-right: 1em;
}

.square {
  display: inline-block;
  background-color: #699;
  height: 80px;
  margin-right: 1em;
  min-width: 80px;
  width: 80px;
}

.circle {
  border-radius: 50px;
  display: inline-block;
  background-color: #969;
  height: 100px;
  margin-right: 1em;
  min-width: 100px;
  width: 100px;
}
<div class="demo">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <div class="other-stuff">
    <button>One&nbsp;button</button>
    <div class="square"></div>
    <button>Another&nbsp;button</button>
    <div class="circle"></div>
    <button>Don't&nbsp;click!</button>
  </div>

相关问题
最新问题