картинка помещающаяся во флексбокс

Question

Можно ли добиться того же результата не применяя вложенный flex?

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

body {
  /* test */
  border: 3px solid orange;
  box-sizing: border-box;
}

.DirectoryTreeIndex {
  height: 90vh;
  width: 90vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* test */
  border: 3px solid black;
  box-sizing: border-box;
}

.DirectoryTreeIndex__ImageWrapper {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  /* test */
  border: 3px solid green;
  box-sizing: border-box;
}

.DirectoryTreeIndex__Image {
  max-width: 100%;
  min-height: 1px;
  flex-grow: 1;
  flex-basis: 1px;
  object-fit: contain;
  /* test */
  border: 3px solid yellow;
  box-sizing: border-box;
}

<html>
  <body>
    <div class="DirectoryTreeIndex">
      <div class="DirectoryTreeIndex__ImageWrapper">
        <img class="DirectoryTreeIndex__Image" src="https://get.pxhere.com/photo/tree-branch-plant-sunlight-leaf-flower-green-botany-maple-leaf-translucent-vegetation-deciduous-poplar-outbreak-flowering-plant-grape-leaves-plant-stem-woody-plant-land-plant-609015.jpg" />
      </div>
      <div style="border: 3px solid green;">
        <button>test</button>
        <button>test</button>
        <button>test</button>
      </div>
    </div>
  </body>
</html>

Answer 1

html, body {
  margin: 0; padding: 0;
  height: 100%; width: 100%;
}

body {
  text-align: center;
  /* test */
  border: 3px solid orange;
  box-sizing: border-box;
}

.DirectoryTreeIndex {
  display: inline-flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-content: flex-start;
  align-items: center;
  gap: 5px;
  height: 90%;
  /* test */
  border: 3px solid black;
  box-sizing: border-box;
}

.DirectoryTreeIndex__Image {
  min-height: 1px; height: calc(100% - 2em);
  max-width: 100%; width: min-content;
  object-fit: contain;
  /* test */
  border: 3px solid yellow;
  box-sizing: border-box;
}

<html>

<body>
  <div class="DirectoryTreeIndex">
    <img class="DirectoryTreeIndex__Image" src="https://get.pxhere.com/photo/tree-branch-plant-sunlight-leaf-flower-green-botany-maple-leaf-translucent-vegetation-deciduous-poplar-outbreak-flowering-plant-grape-leaves-plant-stem-woody-plant-land-plant-609015.jpg"
    />
    <div style="white-space: nowrap;">
      <button>test</button>
      <button>test</button>
      <button>test</button>
    </div>
  </div>
</body>

</html>

БЛОГ НА HUSL

картинка помещающаяся во флексбокс

Ответы (1 шт):