css flex布局与min-height无法被继承问题

最新推荐文章于 2024-05-05 10:55:46 发布

你的口红掉啦！

最新推荐文章于 2024-05-05 10:55:46 发布

阅读量1.1k

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_42640536/article/details/125299017

版权

flex 1 0 auto，内含p标签等文字内容超出flex盒子范围怎么办？

<!-- flex布局包裹p标签，p标签内容超出导致flex盒子变长 -->
<div style="display: flex;" class="no-effect">
  <div style="flex: 0 0 80px">我比较短</div>
  <!-- 添加overflow: hidden见效果 -->
  <div style="flex: auto;">
    <p class="no-wrap">我很长，不是开玩笑的，可以长到没边</p>
  </div>
</div>
给auto的盒子，添加overflow: hidden或者设置height或者min-height。由于flex: 1会自动占满剩余空间。height设置为0也没关系。（出现问题的原因是flex: auto中的flex-basis默认值是auto而非常规的0,所以宽度会超出）

mcss布局中min-height无法被继承怎么办
flex布局，纵向的宽度会被默认占满，然后再放入一个子盒子在其中用height: 100%就能被继承宽度。如果出现什么宽度问题，可以用height: 0解决。
完整代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      div {
        padding: 5px;
        border: 1px solid #ccc;
        box-sizing: border-box;
      }

      .no-effect {
        align-items: center;
        margin: 100px;
        width: 200px;
        color: #999;
      }

      .no-effect > div:first-of-type {
        margin-right: 10px;
      }

      p {
        color: red;
      }

      .no-wrap {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .testHeight {
        display: flex;
        width: 400px;
        background-color: skyblue;
        min-height: calc(100vh - 96px);
      }
      .childDiv {
        flex: 0 0 auto;
        width: 100px;
        background-color: rgb(203, 135, 235);
      }
      .reChildDiv {
        width: 50px;
        height: 100%;
        background-color: black;
      }
    </style>
  </head>
  <body>
    <!-- flex布局包裹p标签，p标签内容超出导致flex盒子变长 -->
    <div style="display: flex;" class="no-effect">
      <div style="flex: 0 0 80px">我比较短</div>
      <!-- 添加overflow: hidden见效果 -->
      <div style="flex: auto;">
        <p class="no-wrap">我很长，不是开玩笑的，可以长到没边</p>
      </div>
    </div>
    <div class="testHeight">
      <div class="childDiv">
        <div class="reChildDiv"></div>
      </div>
    </div>
  </body>
</html>