Question

我有一个CSS网格，而我的问题是，其中一个容器宽度扩展了100％以上。我知道它会因为内容较大而扩展，但我想保留100％。

为什么我需要这个：因为一个字段（当然是女巫的问题），我想用CSS calc缩小。问题是父级宽度百分比浏览器先在子级中计算calc函数。这样，即使在计算父对象的内容大小时最后的字段很小，也是如此。

.parent {
    grid-area: info_panel;
    z-index: 1000;
    background-color: $color-card-background;
    margin: 0.4rem;
    margin-bottom: 1rem;
    padding: 0.9rem;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19);
    border-radius: 1rem;
}
child {
    display: inline-flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 1rem;
}
sub-child { // this is the problem
    display: inline-block;
    max-width: calc(100% - 20rem);
}

编辑

.index-page{
  display: grid;
  justify-content: stretch;
  justify-items: stretch;
  box-sizing: border-box;
  overflow: hidden;
  grid-template-columns: 12rem  auto;
  grid-template-rows: calc(100vh - 50px - 17rem) 17rem;
  grid-template-areas:  "left_panel     right_panel  "
                        "left_panel     info_panel  ";
}

.panel__left {
    background-color: blue;
    overflow: scroll;
    grid-area: left_panel;
 }

.panel__right {
    background-color: red;
    grid-area: right_panel;
    grid-column: right_panel-start / right_panel-end;
    grid-row: right_panel-start / info_panel-end;
}

.panel__info {
    grid-area: info_panel;
    z-index: 1000;
    background-color: white;
    margin: 0.4rem;
    margin-bottom: 1rem;
    padding: 0.9rem;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19);
    border-radius: 1rem;
}

.panel__info__top {
      display: inline-flex;
      justify-content: space-between;
      width: 100%;
      margin-bottom: 1rem;
}

.panel__info__top__titles {
        display: inline-block;
        max-width: calc(100% - 17rem);
}

.panel__info__top__buttons {
        display: inline-block;
        padding-right: 1.4rem;
}

.row_info_text {
  padding-left: 1.4rem;
  padding-right: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  line-height: 120%
}

.icon_button {
  width: 3rem;
  height: 3rem;
  margin: 1rem;
  vertical-align: top;
  background-color: transparent;
  border: none;
}

.icon_button span {
    margin: auto;
    text-align:center;
    font-size: 2.2rem;
    color: $color-theme-main;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">

<div class="index-page">
    <div class="panel__left"></div>
    <div class="panel__right"></div>
    <div class="panel__info">
        <div class="panel__info__top">
            <div class="panel__info__top__titles">
                <div class="row_info_text "><b>Small text</b></div>
                <div class="row_info_text">Long text that ruin my layout, because is too long. Long text that ruin my layout, because is too long.Long text that ruin my layout, because is too long.Long text that ruin my layout, because is too long. It is tooooo long</div>
                <div class="row_info_text">small text</div>
            </div>
            <div class="panel__info__top__buttons">
                <button class="icon_button"><span class="material-icons">assignment_turned_in_outlined</span></button>
                <button class="icon_button"><span class="material-icons">perm_phone_msg</span></button>
                <button class="icon_button"><span class="material-icons">accessibility</span></button>
            </div>
        </div>
    </div>
</div>

Answer 1

网格模板列：repeat（2，12rem，1fr）;

该行应该可以解决您的问题。

CSS网格：区域宽度超过100％

1 个答案: