Skip to content
This repository has been archived by the owner on Jan 19, 2024. It is now read-only.

column flex: wrong width on automatically resized img #286

Open
Pestdoktor opened this issue Jan 12, 2021 · 0 comments
Open

column flex: wrong width on automatically resized img #286

Pestdoktor opened this issue Jan 12, 2021 · 0 comments

Comments

@Pestdoktor
Copy link

Similar to Flexbug#14: same workaround, different symptom

<!DOCTYPE html>
<html>
  <head>
    <style>
      .flex {
        display: inline-flex;
        flex-direction: column;
        background: red;
        height: 150px;
      }

      .content {
        min-height: 0;
      }

      img {
        width: auto;
        height: 100%;
      }

      .flex-fix {
        flex-direction: initial;
        writing-mode: vertical-lr;
      }

      .flex-fix > * {
      	writing-mode: initial;
      }

      .content-fix {
        writing-mode: vertical-lr;
      }

      .content-fix > * {
      	writing-mode: initial;
      }
    </style>
  </head>
  <body>
    <h2>Actual Behaviour:</h2>
    <div class="flex">
      <h3>col</h3>
      <div class="content"><img src="https://via.placeholder.com/300"/></div>
    </div>
    <br clear="all"/>
    <br/>
    <h2>Desired Behaviour:</h2>
    <div class="flex flex-fix">
      <h3>col</h3>
      <div class="content content-fix"><img src="https://via.placeholder.com/300"/></div>
    </div>
  </body>
</html>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Pestdoktor