NullPointerException, в то время как использование поместило метод HashMap

Я хочу, чтобы один из дочерних элементов дисплея: flex; подгонять высоту к остальным.

Предположим, вы хотите, чтобы зеленая секция (child3) имела наибольшую высоту:

• убедитесь, что у вас есть align-items: stretch (по умолчанию так что не переопределяйте это) - это гарантирует, что каждый строки изгибает дочерний элемент до максимальной высоты изгибает дочерний элемент.
• обернуть содержимое других разделов (child1 и child2) в абсолютно позиционированный элемент .
• сделайте этот элемент-обертку флексбоксом колонки , чтобы получить переполнение прямо на желтой секции .

См. Демонстрацию ниже:

.parent {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  /*align-items: baseline;*/
}

.child1 {
  background-color: red;
  align-self: stretch;
  width: 25%;
  min-width: 25%;
  max-width: 25%;
}

.child2 {
  background-color: yellow;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  margin: 0 15px;
  width: calc(50% - 30px);
  max-width: calc(50% - 30px);
  display: flex;
  flex-direction: column;
  flex-shrink: 1;
}

.child3 {
  background-color: green;
  width: 25%;
  min-width: 25%;
  max-width: 25%;
}

.child2 .tabl {
  flex-shrink: 1;
  min-height: 0;
  overflow: auto; /* changed to auto */
}

.child1, .child2, .child3 { /* ADDED */
  position: relative;
}

.child-wrap { /* ADDED */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

<div class="parent">
  <div class="child1">
  <div class="child-wrap">
    <p>Some element one</p>
    <p>Some element two</p>
    <p>Some element three</p>
    <p>Some element four</p></div>
  </div>
  
  <div class="child2">
  <div class="child-wrap">
    <div class="info">
      <h2>Element</h2>
    </div>
    <div class="tabl">
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
    </div>
    <div class="footer">
      <button class="btn">Some button</button>
    </div>
    </div>
  </div>
  
  <div class="child3">
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
  </div>
</div>

<час>

Предположим, вы хотите либо левой или правой секций, чтобы иметь максимальную высоту - в этом случае используйте вышеупомянутое абсолютное позиционирование только для среднего желтого элемента - см. Демонстрацию ниже, где самый высокий из левый или правый элементы определяют высоту всей обертки parent :

.parent {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  /*align-items: baseline;*/
}

.child1 {
  background-color: red;
  align-self: stretch;
  width: 25%;
  min-width: 25%;
  max-width: 25%;
}

.child2 {
  background-color: yellow;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  margin: 0 15px;
  width: calc(50% - 30px);
  max-width: calc(50% - 30px);
  display: flex;
  flex-direction: column;
  flex-shrink: 1;
}

.child3 {
  background-color: green;
  width: 25%;
  min-width: 25%;
  max-width: 25%;
}

.child2 .tabl {
  flex-shrink: 1;
  min-height: 0;
  overflow: auto; /* changed to auto */
}

.child1, .child2, .child3 { /* ADDED */
  position: relative;
}

.child-wrap { /* ADDED */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

<div class="parent">
  <div class="child1">
    <p>Some element one</p>
    <p>Some element two</p>
    <p>Some element three</p>
    <p>Some element four</p>
    <p>Some element two</p>
    <p>Some element three</p>
    <p>Some element four</p>
  </div>

  <div class="child2">
    <div class="child-wrap">
      <div class="info">
        <h2>Element</h2>
      </div>
      <div class="tabl">
        <p>Some element one</p>
        <p>Some element two</p>
        <p>Some element three</p>
        <p>Some element four</p>
        <p>Some element one</p>
        <p>Some element two</p>
        <p>Some element three</p>
        <p>Some element four</p>
        <p>Some element one</p>
        <p>Some element two</p>
        <p>Some element three</p>
        <p>Some element four</p>
        <p>Some element one</p>
        <p>Some element two</p>
        <p>Some element three</p>
        <p>Some element four</p>
      </div>
      <div class="footer">
        <button class="btn">Some button</button>
      </div>
    </div>
  </div>

  <div class="child3">
    <p>Some element one</p>
    <p>Some element two</p>
    <p>Some element three</p>

  </div>
</div>

[1111 ]

19

nullpointerexception hashmap java

задан Eddie 10 April 2009 в 04:21

поделиться