0

.a {
  background: #CCC;
  box-sizing: border-box;
  resize: both;
  overflow: hidden;
  width: 200px;
  height: 200px;
  padding: 10px;
}

.b {
  background: #FCC;
  height: 50px;
  display: flex;
}

.c {
  background: #CFC;
  height: 100%;
}
<div class="a">
  <div class="b">
    Some text
  </div>
  <div class="c">
    Some text
  </div>
</div>

Как заставить .c занять только доступное место, а не выходить за рамки?

(

1 ответ 1

1

.a {
  display: flex;
  flex-direction: column;
  
  background: #CCC;
  box-sizing: border-box;
  resize: both;
  overflow: hidden;
  width: 200px;
  height: 200px;
  padding: 10px;
}

.b {
  background: #FCC;
  height: 50px;
}

.c {
  background: #CFC;
  flex-grow: 1;
}
<div class="a">
  <div class="b">
    Some text
  </div>
  <div class="c">
    Some text
  </div>
</div>

.a {
  background: #CCC;
  box-sizing: border-box;
  resize: both;
  overflow: hidden;
  width: 200px;
  height: 200px;
  padding: 10px;
}

.b {
  background: #FCC;
  height: 50px;
}

.c {
  background: #CFC;
  overflow: hidden;
  height: calc(100% - 50px);
}
<div class="a">
  <div class="b">
    Some text
  </div>
  <div class="c">
    Some text
  </div>
</div>

.a {
  background: #CCC;
  box-sizing: border-box;
  resize: both;
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 200px;
  padding: 10px;
}

.b {
  background: #FCC;
  height: 50px;
}

.c {
  background: #CFC;
  overflow: hidden;
  position: absolute;
  top: 60px;
  bottom: 10px;
  left: 10px;
  right: 10px;
}
<div class="a">
  <div class="b">
    Some text
  </div>
  <div class="c">
    Some text
  </div>
</div>

2
  • Но что делать, если не известен размер .b? Или их будет несколько.
    – Firec
    25 июн 2020 в 11:18
  • Можно воспользоваться первым вариантом, задать ему min-height, чтобы он не сжимался меньше заданной высоты. 25 июн 2020 в 11:46

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.