Css сетка: ширина области увеличивается более чем на 100% - PullRequest
Новая
       5

Css сетка: ширина области увеличивается более чем на 100%

0 голосов
/ 25 марта 2020

У меня есть сетка CSS, и моя проблема в том, что ширина одной из контейнеров увеличивается более чем на 100%. Я понимаю, что он расширяется из-за того, что содержание больше, но я хотел бы остаться на 100%.

Зачем мне это нужно: потому что одно поле (ведь проблема конечно), я бы хотел сжать с CSS cal c. Проблема в том, что браузер родительского процента ширины вычисляет до функции cal c в дочернем элементе. Таким образом, несмотря на то, что поле в конце маленькое, когда вычисляется размер содержимого родительского элемента, оно велико. 

.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>

1 Ответ

0 голосов
/ 27 марта 2020

grid-template-columns: repeat (2, 12rem, 1fr);

эта строка должна решить вашу проблему.

...